Question

I can’t figure out how to set up a jquery rotate function that would only rotate on hover.

Here is the code that I am using:

$('div.settingsButton').hover(function() {
    var angle = 0;
    setInterval(function() {
        angle += 4;
        $(this).rotate(angle);
    }, 50);
},
function() {
    var angle = 0;
    setInterval(function() {
        angle = 0;
        $(this).rotate(angle);
    }, 50);
});

The rotate is a plugin found here:
http://code.google.com/p/jqueryrotate/

Answer 1

Within your timer function, this is not the DOM element. You have to store it in a variable. Also, you should use clearInterval in your mouseout function.

Here’s some sample code:

var timer;

$('div.settingsButton').hover(function() {

    var angle = 0,
        $this = $(this);

    timer = setInterval(function() {
        angle += 4;
        $this.rotate(angle);
    }, 50);
},
function() {

    timer && clearInterval(timer);
    $(this).rotate(0);
});

Here’s the fiddle: http://jsfiddle.net/ptJuU/