stopping jquery animation when not hovering

Question

I posted a question earlier about a div animation and I'm trying to modify it a bit. I have a div that rotates when the page loads. When hovering over it, I'd like for it to stop.

Here's the script

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

Here's my JS page

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

Use clearTimeout() method. As an example:

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​​

DEMO: 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;
}​

FIDDLE

Answer 3

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