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 .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在页面中必须是唯一的，所以最好use：

$('#first')

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

Answer 2

试试这个 http://jsfiddle.net/5zcv3/5/

你不必同时使用两者delay和animate，只需给animate不同的速度即可； 效果类似，stop 是必须的

根据我的经验，