jq鼠标事件频繁移入移出只触发一次

基于jq的动画效果,当我们开发菜单等效果时,经常会用到如鼠标移入移出显示二级菜单等效果,但是再我们实际开发中却发现,鼠标的移入移出效果被频繁触发,那么关于该问题我们要如何处理呢?

开始之前我们需要先了解jq的stop()方法

stop()方法定义:停止当前正在运行的动画。

看到关于他的定义您是不是恍然大悟?

当我们频繁移入移出鼠标时不就是频繁调用动画的过程吗?换而言之就是我们可以再每次调用动画前都先停止掉当前触发的动画效果,这样所剩下的不是只有一次需要的动画了吗?

完整代码如下:

$(function(){
$('#head_personal').on({
mouseover : function(){
$(".head_personal_pos").stop().slideDown();
} ,
mouseout : function(){
$(".head_personal_pos").stop().slideUp();
}
}) ;
})

以上效果为鼠标移入时滑动打开,移出时滑动关闭!

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!