JQuery 动画中 stop() 和 Delay() 的问题

Question

正如您在 http://jsfiddle.net/FrelCee/5zcv3/4/ 上看到的那样，我想在容器悬停时为这 3 个 div 制作动画。

问题是当您多次快速悬停时会出现这个丑陋的队列。 我还尝试使用 .stop() 函数，但 delay() 不起作用。

这是一个带有 stop() 函数和delay() 问题的示例:http://jsfiddle.net/FrelCee/FHC99/22/

有谁知道更好的方法吗？

提前致谢!

Answer 1

您只需要至少向 .stop(true, true) 提供第一个参数即可清除当前队列，并且您可以决定是否还想提供第二个参数以跳转到当下一个动画开始时动画结束(这取决于您，因为它会产生稍微不同的效果)。您还需要将 .stop() 调用放在 .delay() 之前，这样就不会清除 .delay()。请参阅 jQuery doc for .stop()了解 .stop() 的两个参数。当我在这里这样做时:http://jsfiddle.net/jfriend00/pYgQr/ ，它似乎可以很好地处理快速悬停进/出。

// On hover function
var hover = $('#container');
hover.hover(function(){

    $(this).find('#first').stop(true, true).animate({left:10}, 600);
    $(this).find('#second').stop(true, true).delay(100).animate({left:10}, 600);
     $(this).find('#third').stop(true, true).delay(250).animate({left:10}, 600);

}, function() {

    $(this).find('#first').stop(true, true).animate({left:-100}, 600);
    $(this).find('#second').stop(true, true).delay(100).animate({left:-100}, 600);
    $(this).find('#third').stop(true, true).delay(250).animate({left:-100}, 600);

}); // on mouse out hide divs

<小时/>

另外，我不知道你为什么一开始就这样做:

var hover = $('#container');
$(hover).hover(function(){

您可以执行以下操作:

var container = $('#container');
container.hover(function(){

或者这个:

$('#container').hover(function(){

<小时/>

此外，没有理由这样做:

$(this).find('#first')

这些 ID 在页面中必须是唯一的，因此最好使用:

$('#first')

这在 jQuery 中会更快，因为它将能够在内部使用 document.getElementById('first')。