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

   $("#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快速移动引起的事件延迟