鼠标停留在当前位置时停止jQueryRotate插件并继续mouseout

时间:2012-07-29 22:15:52

标签: jquery animation rotation mouseover mouseout

我正在尝试使用jQueryRotate插件停止鼠标悬停在当前位置上的旋转轮,并继续旋转鼠标停止时旋转的位置,

我似乎无法使用适用于我的自定义动画的停止方法

旋转轮的代码将在jsfiddle

var angle = 0;
    setInterval(function(){
        angle+=3;
    $("#carwheel").rotate(angle,{ easing:'easeInOutElastic'});

    $("#carwheel")
    .mouseover(function () { $(this).stop(); })
    .mouseout(function () { $(this).resume(); })

    },100);

1 个答案:

答案 0 :(得分:1)

以下代码适合您,

var angle = 0;
var int;
rotateImage();

function rotateImage() {
    int = setInterval(function() {
        angle += 3;
        $("#image").rotate(angle);
    }, 50);
}
$("#image").mouseover(function() {
    clearInterval(int);
    //$(this).stop();
}).mouseout(function() {
    rotateImage();
});​

http://jsfiddle.net/73pXD/2393/