Question

为必须在午餐时完成的高端客户端做一些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);
        }
    );

提前致谢

Answer 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/

Answer 2

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

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

2 个答案: