另一个启动时停止动画功能

Question

有两种不同的功能，一种用于mouseenter，另一种用于mouseleave。

第一个显示块，第二个隐藏它（两个都带有动画）。

问题是，mouseleave可以在mouseenter内的动画完成之前启动。

在这种情况下，该块会闪烁几次。

我想在mouseenter启动时停止mouseleave函数内的任何动画。

怎么做？

Answer 1

在每个动画功能的前面放置一个.stop()。 E.g：

$(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/。