有两种不同的函数，一种用于mouseenter，另一种用于mouseleave。
第一个显示 block ，第二个隐藏 block (均带有动画)。
问题是，mouseleave 可以在 mouseenter 中的动画完成之前启动。
在这种情况下， block 会闪烁几次。
我想在 mouseleave 启动时停止 mouseenter 函数内的任何动画。
如何做到这一点？
最佳答案
在每个动画函数前放置一个.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/ .
关于javascript - 当另一个开始时停止动画功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5292909/