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

Question

有两种不同的功能,一种用于mouseenter,一种用于mouseleave.

第一个显示块,第二个隐藏它(都带有动画).

问题是,mouseleave可以在动画内部mouseenter完成之前启动.

在这种情况下,块会闪烁几次.

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

这该怎么做？

Answer 1

放置.stop()在每个动画功能的前面.例如:

$(this).stop().slideDown();
$(this).stop().slideUp();

如果$(this)当前没有动画,.stop()则根本不做任何事情.

注意:使用时可能会遇到标准幻灯片和淡入淡出功能的问题.stop()- 这些会记住元素完全动画的最后高度/不透明度.因此,如果元素在.stop().slideUp()被调用之前仅达到50%的高度,则下一个.slideDown()将使其动画仅为50%的高度.看到这种情况出现在这里的进出快速移动鼠标,再次输入前.

jQuery文档建议使用.stop(true, true)导致半完成的动画跳转到最终位置.这当然会造成难看的"闪光".

我建议避免.slideUp()或.fadeIn()完全设置特定的高度/不透明度来动画,例如:

$(this).stop().animate({height: 100});
$(this).stop().animate({height: 0});

请参阅此演示:http://jsfiddle.net/Stwnv/.