jQuery .stop() not working effect shake on hover

Question

I have jQUery code:

setInterval(function() {

    var grayarrow = jQuery("ul#dropdowngray").parent(); 
    var greenarrow = jQuery("ul#dropdown").parent();

    grayarrow.effect('shake', { times:2 }, 100);
    greenarrow.effect('shake', { times:3 }, 200);

    jQuery("ul#dropdowngray").parent().hover( 

        function (){ grayarrow.stop().effect('shake', { times:0 }, 100); },

        function (){ grayarrow.stop().effect('shake', { times:2 }, 100); }

    );

    jQuery("ul#dropdown").parent().hover( 

        function (){ greenarrow.stop().effect('shake', { times:0 }, 100); },

        function (){ greenarrow.stop().effect('shake', { times:2 }, 100); }

    );

}, 5000);

To see the effect: http://mainstreetfinancing.com.s136249.gridserver.com/frequently-asked-questions-direct-lender-net-lender.html

However, when I hover over the element, the shaking continues to execute. Originally, I had code:

jQuery("ul#dropdowngray").parent().hover( 

            function (){ grayarrow.stop(); },

            function (){ grayarrow.stop(); }

        );

BUT, since this was not working either, I implemented the solution discussed here: jquery .stop() not working

How can I effectively make the shaking stop when the mouse is over the shaking element?

Thank you,

Answer 1

To stop immediately you need to pass 2 argements (clearQueue:true, jumpToEnd:true) into stop() call, see http://api.jquery.com/stop/. Also you should set a variable to control the setInterval call so that when you mouse is hovered on the element it should return immediately. Here is the code. To see the effect, go to http://jsfiddle.net/BT4bt/

var stopShaking = false;


var shakeIt = function() {
    $('#shaker').effect('shake', { times: 6 }, 100);
}

setInterval(function() {
    if (stopShaking) {
        return;
    }
    shakeIt();
}, 5000);

$('#shaker').hover(function(){
    $(this).stop(true, true);
    stopShaking = true;
}, function(){
    stopShaking = false;
})