ホバリングしていないときに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​​ 

DEMO：あなたは回転の独自の実装を行っているhttp://jsfiddle.net/Uf9qZ/

Answer 2

、あなたが同様の管理を自分で処理する必要があり、そうsetTimeoutオブジェクトをキャッシュしたときclearTimeoutを使用します。停止する必要があり、それ

Answer 3

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