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

<p>Here's the script</p>

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

<p>Here's my JS page</p>

<pre><code>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);
}​
</code></pre>
