jquery - jQuery .stop() 在悬停时不起作用效果抖动

Question

我有jQuery代码：

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);

看效果： http: //mainstreetfinancing.com.s136249.gridserver.com/frequently-asked-questions-direct-lender-net-lender.html

但是，当我将鼠标悬停在元素上时，震动会继续执行。最初，我有代码：

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

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

            function (){ grayarrow.stop(); }

        );

但是，由于这也不起作用，我实现了这里讨论的解决方案：jquery .stop() not working

当鼠标悬停在摇晃元素上时，如何有效地停止摇晃？

谢谢，

Answer 1

要立即停止，您需要将 2 个参数 (clearQueue:true, jumpToEnd:true) 传递给 stop() 调用，请参阅http://api.jquery.com/stop/。此外，您应该设置一个变量来控制 setInterval 调用，以便当您将鼠标悬停在元素上时，它应该立即返回。这是代码。看效果，去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;
})