javascript - 不悬停时停止jquery动画

Question

我之前发布了一个关于div动画的问题，我正在尝试对其进行一些修改。我有一个div在页面加载时旋转的。当悬停在它上面时，我想让它停下来。

这是脚本

rotate(); //the function which rotates the div 
$("#div2").hover(function() {
    $("#div2").stop();
});​

这是我的 JS 页面

var obj = "div2";
var angle = 0;
var interval = 2323;
increment = 5;

function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
    setTimeout(rotate, interval);
}​

Answer 1

使用clearTimeout()方法。举个例子：

var obj = "div2";
var angle = 0;
var interval = 100;
var increment = 5;
var timer = null;

function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
    timer = setTimeout(rotate, interval);
}

$("#div2").hover(function() {
    clearTimeout(timer);
}, function() {
    rotate();
});

rotate(); //the function which rotates the div​​

演示：http: //jsfiddle.net/Uf9qZ/

Answer 2

var elm = $("#div2"),
    angle = 0,
    interval = 2323,
    increment = 5,
    T = setInterval(rotate, interval);

elm.on({
    mouseenter: function () {
        clearInterval(T);
    },
    mouseleave: function() {
        T = setInterval(rotate, interval);
    }
});

function rotate() {
    elm.css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
}​

小提琴

Answer 3

您正在执行自己的轮换实现，您也必须自己处理管理，因此缓存setTimeout对象并clearTimeout在需要停止时使用