正如您在 http://jsfiddle.net/FrelCee/5zcv3/4/ 上看到的那样，我想在容器悬停时为这 3 个 div 设置动画。
问题是当您多次快速悬停时会出现这个丑陋的队列。 我也尝试使用 .stop() 函数，但是 delay() 不起作用。
这是一个带有 stop() 函数和 delay() 问题的示例：http://jsfiddle.net/FrelCee/FHC99/22/
有没有人知道更好的方法？
提前致谢！
【问题讨论】：
标签： jquery animation queue delay
您只需向.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')。
【讨论】：
.stop(true, false)而不是.stop(true, true)来看看你是否更喜欢它。当一个动画被下一个动画打断时，这两个选项会产生略微不同的外观，但两者都会出现在正确的位置。你可以在这里看到这个替代效果：jsfiddle.net/jfriend00/9QDue.
【讨论】：