有两种不同的功能，一种用于mouseenter，一种用于mouseleave。
第一个显示块，第二个隐藏它（都带有动画）。
问题是，mouseleave 可以在 mouseenter 内部的动画完成之前启动。
在这种情况下，方块会闪烁几次。
我想在mouseleave 启动时停止mouseenter 函数内的任何动画。
如何做到这一点？
【问题讨论】：
标签： javascript jquery html css animation
在每个动画函数前面放置一个.stop()。例如：
$(this).stop().slideDown();
$(this).stop().slideUp();
如果 $(this) 当前没有动画，.stop() 将什么也不做。
注意：与.stop() 一起使用时，您可能会遇到标准滑动和淡入淡出功能的问题 - 这些功能会记住元素完全动画到的最后高度/不透明度。因此，如果在调用 .stop().slideUp() 之前元素仅达到 50% 的高度，则下一个 .slideDown() 将使其动画仅达到 50% 的高度。在再次进入之前快速移入移出鼠标，查看 here 发生的情况。
jQuery 文档建议使用.stop(true, true)，它会导致半完成的动画跳转到它们的最终位置。这当然会造成难看的“闪光”。
我建议完全避免使用 .slideUp() 或 .fadeIn() 并设置特定的高度/不透明度以进行动画处理，例如：
$(this).stop().animate({height: 100});
$(this).stop().animate({height: 0});
查看此演示：http://jsfiddle.net/Stwnv/。
【讨论】：