前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

mouseout和mouseover快速移动引起的事件延迟

jq
function Menu_swapImageout() {
   $("#div1").animate({ backgroundPositionY: '-43px' }, 80);//图片上移 43像素,80速度
}
function Menu_swapImageover() {
  $("#div1").animate({ backgroundPositionY: '+0px' }, 80);
}
  <div style="width: 163px;height: 49px;background: url(../images/ImgName.gif);" id="div1"
  onmouseout="Menu_swapImageout()" onmouseover="Menu_swapImageover()">
  </div


图片高度有92px
当我光标在图片位置很快的移入移出,将不停的在触法事件, 然后鼠标移开,事件由于之前快速移动还没反应过来,延迟触发中。(我是一个菜单图片,怎么才能当鼠标移开以后就终止延迟的 事件)

解决方案:

1:使用了onmouseenter代替了你原来的onmouseover,使得第一次触发事件后,在对象区域反复移动将不再继续触发


2:使用:not(:animated)来判断当前对象是否正在执行动画,只有当前对象不在执行动画时才继续指定的操作。也就是说它不干扰之前的动画动作

$(function(){
    $('#div1').mouseenter(function(){
        $("#div1:not(:animated)").animate({ backgroundPositionY: '-43px' }, 80);//图片上移 43像素,80速度
    }).mouseleave(function(){
        $("#div1:not(:animated)").animate({ backgroundPositionY: '+0px' }, 80);
    })
})


转载请注明:前端录»mouseout和mouseover快速移动引起的事件延迟