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')。

Answer 2

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

您不必同时使用delay和animate，只需提供animate不同的速度;效果类似

根据我的经验，stop是必须的

动画中的stop（）和delay（）的JQuery问题

2 个答案: