Search code examples
jqueryanimationrotationmouseovermouseout

stop jQueryRotate plugin on mouseover on current position and continue on mouseout


I am trying to stop a spinning wheel on the current position its in on mouse over using jQueryRotate plug in and continue animation rotating where it was stopped on mouse out,

I can't seem to make it work with the stop method which works on my custom animations

the code for the spinning wheel would be here on jsfiddle

var angle = 0;
    setInterval(function(){
        angle+=3;
    $("#carwheel").rotate(angle,{ easing:'easeInOutElastic'});

    $("#carwheel")
    .mouseover(function () { $(this).stop(); })
    .mouseout(function () { $(this).resume(); })

    },100);

Solution

  • Following Code will work for you,

    var angle = 0;
    var int;
    rotateImage();
    
    function rotateImage() {
        int = setInterval(function() {
            angle += 3;
            $("#image").rotate(angle);
        }, 50);
    }
    $("#image").mouseover(function() {
        clearInterval(int);
        //$(this).stop();
    }).mouseout(function() {
        rotateImage();
    });​
    

    http://jsfiddle.net/73pXD/2393/