jQuery的stop()似乎在阻塞尚未排队的动画
jQuery的stop()实际上是如何工作的？
如果你看上去像这里(http://jsfiddle.net/hWTT6/) )，当你在主蓝框上悬停时，它应该会褪色为红色，当你悬停时，它应该会褪色。问题是，它将完全淡出红色(然后回到蓝色)，即使鼠标在第一次淡出之前已经悬停。从幻灯片的效果可以更清楚地看出这个问题。悬停在滑梯上的“按钮”上，主框将滑到蓝色，悬停下来，它会向后滑行。但是，试着在第一个动画完成之前，不停地徘徊。你会看到所有四个动画都被执行了。我在这里包括了这两个例子，以表明这不仅仅是一个问题，一个效果或什么。
我认为在动画之前添加一个stop可以很容易地解决这个问题，如代码中所示。但是，如果我这样做，当前的动画将停止，下一个将永远不会启动。就好像stop阻止了在调用stop之后发生的动画一样。
我在这里错过了什么？
谢谢。
回答 4
Stack Overflow用户
发布于 2011-07-01 15:15:23
您忽略了.stop()接受两个参数。都是布尔值，表示：
- clearQueue (first)
- jumpToEnd (second)因此，通过调用$('#foo').stop( true, true ).doSomeOtherStuff()，您应该可以得到您想要的目标。
参考资料：.stop()
Stack Overflow用户
发布于 2011-07-01 15:20:36
问题是CSS由于在任意点停止而变得混乱。
fadeIn()、fadeOut()、slideUp()和slideDown()从当前状态移动到新状态，然后恢复到新状态--而不是原来的CSS。
您需要将CSS恢复到可用状态，以便在.stop()之后继续使用，或者更清楚地指定动画目标。
正如其他人所说的，您可以通过确保在停止动画时，CSS跳转到它的末尾，而不是将所有内容都保持在任意状态，从而使CSS达到正确的位置。
更新：
查看本演示更新中的代码：http://jsfiddle.net/hWTT6/5/
这可能不是你想要的效果，但如果你不想让动画运行下去，关键是让动画恢复到你想要的状态。
$(function() {
$('#fade')
.mouseenter(function() {
$('#fg_fade').stop().animate({ 'opacity': 0 }, 'slow', function() {
$('#fg_fade').css('height', '100%');
});
})
.mouseleave(function() {
$('#fg_fade').stop().animate({ 'opacity': 1, 'height': '100%' }, 'slow');
});
$('#slide_fire')
.mouseenter(function() {
$('#fg_fade').stop().animate({ 'height': 0 }, 'slow', function() {
$('#fg_fade').css('opacity', 1);
});
})
.mouseleave(function() {
$('#fg_fade').stop().animate({ 'height': '100%' }, 'slow', function() {
$('#fg_fade').css('opacity', 1);
});
});
});Stack Overflow用户
发布于 2011-07-01 15:18:21
您可以将stop()选项设置为(true，true)，以便取消提示中的所有事件并跳转到前一个动画的末尾。看看小提琴：http://jsfiddle.net/hWTT6/4/
https://stackoverflow.com/questions/6549802
复制相似问题
腾讯云开发者
