jquery hover mouseenter mouseleave事件只触发一次动画

Question

jquery.mouseenter(function(){
    $(div).animate({'margin-top':'100px'},1000)
})
jquery.mouseleave(function(){
    $(div).animate({'margin-top':'200px'},1000)
})

鼠标移动到某个div上，触发mouseenter事件和动画，移出触发mouseleave事件和动画，但是来回划过这个div，事件就被触发了多次，动画也要重复好几遍，怎么才能在动画执行过程中，不触发mouseenter、mouseleave事件呢，即动画过程中，鼠标划过这个div后，动画不会重复出现，只有动画完了 ，再划过，才会触发

Answer 1

你可以使用stop方法：

$(div).stop(false, true).animate({'margin-top':'100px'},1000);

如果stop()的第一个参数为true，表示立即清除当前的动画队列，默认为fx；如果第二个参数为true，表示立即将当前正在执行的动画置为它的结束状态。

Answer 2

执行动画前判断：

if (!$(obj).is(':animated')) {
    // to do something
}

如果所选的Element没有在正在动画中状态，则执行动画。否则忽略

Answer 3

^_^ （碰到了从前清楚解答过的问题的表情）

这个被 @Humphry 称为“动画原子性问题”。就是说如果动画动作是一个不可重入的原子性过程，那么在代码中要如何实现这一特性。

一个很清楚的答案见这里。答案的方式是显而易见的标志位法：对准做动画的元素，动画开始时置标，结束时（用回调函数）去掉。有标志时不得触发启动动画的事件即可。