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

【问题标题】：Jquery rotate, run on mouseenter, stop on mouseoutJquery旋转，在mouseenter上运行，在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上吗，那我看看。

标签： jquery animation hover rotation

【解决方案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() 来停止动画 :) 希望它对未来有所帮助

【讨论】：