Question

doing some jQuery animation for a high profile client that has to be finished by lunch

Basically what I’m trying to do is animate an object in a 360 degree circle repeatedly when it is hovered, and return the animation to its start point when the mouse leaves.

I’m using the Jquery rotate plugin http://code.google.com/p/jqueryrotate/wiki/Examples

I’ve got it to animate on mouseover, however can’t, no matter how hard I try, get it to stop animating on mouse out – I’m currently messing around with intervals to try and get it to cooperate – here’s my current code, what am I missing?!?!

    function rotation(){

    jQuery("#merm").rotate({angle:0, animateTo: 360, callback: rotation });
    }

    jQuery("#sirens").hover(
        function(){
        hoverInterval = setInterval(rotation, 1000);
        },
        function(){
            clearInterval(hoverInterval);
        }
    );

Thanks in advance

Answer 1

$(function(){
    var t;
    $("#sirens").mouseenter(function(){
        var angle = 0;
        t = setInterval(function(){
            angle+=3;
            $("#sirens").rotate(angle);
        },50);
    }).mouseleave(function(){
        clearInterval(t);
        $("#sirens").rotate(0);
    });
});

See it working here: http://jsfiddle.net/t4MHp/1/