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/