开发者社区> 问答> 正文

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

展开
收起
云栖技术 2016-05-24 22:42:31 2276 0
1 条回答
写回答
取消 提交回答
  • 社区爱好者,专为云栖社区服务!

    你可以使用stop方法:

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

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

    2019-07-17 19:13:17
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载