Jquery旋转，在mouseenter上运行，在mouseout上停止

Posted 2023-05-08

【中文标题】Jquery旋转，在mouseenter上运行，在mouseout上停止

【英文标题】：Jquery rotate, run on mouseenter, stop on mouseout

【发布时间】：2012-03-19 20:54:29

【问题描述】：

为一个必须在午餐前完成的高端客户做一些 jQuery 动画

基本上我想要做的是在鼠标悬停时重复地在 360 度圆中为对象设置动画，并在鼠标离开时将动画返回到其起点。

我正在使用 Jquery 旋转插件 http://code.google.com/p/jqueryrotate/wiki/Examples

我已经让它在鼠标悬停时设置动画，但是无论我多么努力，都不能让它在鼠标移出时停止动画 - 我目前正在搞乱间隔以尝试让它合作 -这是我当前的代码，我错过了什么？！？！

    function rotation()

    jQuery("#merm").rotate(angle:0, animateTo: 360, callback: rotation );
    

    jQuery("#sirens").hover(
        function()
        hoverInterval = setInterval(rotation, 1000);
        ,
        function()
            clearInterval(hoverInterval);
        
    );

提前致谢

【问题讨论】：

你能把你的代码弹出到jsfiddle上吗，那我看看。

【参考方案1】：

$(function()
    var t;
    $("#sirens").mouseenter(function()
        var angle = 0;
        t = setInterval(function()
            angle+=3;
            $("#sirens").rotate(angle);
        ,50);
    ).mouseleave(function()
        clearInterval(t);
        $("#sirens").rotate(0);
    );
);

在这里查看它的工作原理：http://jsfiddle.net/t4MHp/1/

【讨论】：

太棒了，我应该提到我需要它在鼠标悬停时返回开始，这就是我使用这个特定示例的原因---- var rotation = function () $("#img ").rotate( angle:0, animateTo:360, callback: rotation ); 旋转（）；

更新为在鼠标离开时返回 0。

【参考方案2】：

只是一个简短的信息 - 今天发布的新版本 jQueryRotate 2.2 支持通过调用 .stopRotate() 来停止动画 :) 希望它对未来有所帮助