当前位置:Gxlcms > JavaScript > jquery事件hover、mouseenter、mouseleave只触发一次动画

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

时间:2021-07-01 10:21:17 帮助过:37人阅读

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

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后,动画不会重复出现,只有动画完了 ,再划过,才会触发

你可以使用stop方法:

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

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

执行动画前判断:

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

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

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

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

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

以上就是jquery事件hover、mouseenter、mouseleave只触发一次动画的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行