mouseout和mouseover当快速移动 事件延迟触发问题

Question

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
 当我光标在图片位置很快的移入移出，将不停的在触法事件， 然后鼠标移开，事件由于之前快速移动还没反应过来，延迟触发中。（我是一个菜单图片，怎么才能当鼠标移开以后就终止延迟的 事件）

Answer 1

这个事件是可以被取消的，所以，你可以试试用调用下面这个函数，进行取消
function preventDefault(eventObject){
eventObject = eventObject || getEventObject(eventObject);
if(eventObject.preventDefault){
eventObject.preventDefault();
}else{
//IE
eventObject.returnValue = false;
}
}
试试哦，我没有用过这个东西~~

Answer 2

试试使用：onmouseenter代替onmouseover
使用：onmouseleave代替onmouseout

Answer 3

$('#div1').hover(
    function() {
        $("#div1").stop().animate({ backgroundPositionY: -43}, 80);     
    },
    function() {
        $("#div1").stop().animate({ backgroundPositionY: 0}, 80);
    } 
);

Answer 4

3楼朋友的方法是在你重复移动的过程中先停止之前的动画，再继续重新执行动画我下面的方法
1：使用了onmouseenter代替了你原来的onmouseover，使得第一次触发事件后，在对象区域反复移动将不再继续触发
2：使用:not(:animated)来判断当前对象是否正在执行动画，只有当前对象不在执行动画时才继续指定的操作。也就是说它不干扰之前的动画动作自己参考着用吧。
<script>
$(function(){
    $('#div1').mouseenter(function(){
        if($("#div1:not(:animated)")){//只有不在执行动画的时候才执行
            $("#div1").animate({ backgroundPositionY: '-43px' }, 80);//图片上移 43像素，80速度
        }
    }).mouseleave(function(){
        if($("#div1:not(:animated)")){
            $("#div1").animate({ backgroundPositionY: '+0px' }, 80);
        }
    })
})
<script>
<div style="width: 163px;height: 49px;background: url(../images/ImgName.gif);" id="div1">

Answer 5

可以简化一下，我之前的额外判断纯属多余
$(function(){
    $('#div1').mouseenter(function(){
        $("#div1:not(:animated)").animate({ backgroundPositionY: '-43px' }, 80);//图片上移 43像素，80速度
    }).mouseleave(function(){
        $("#div1:not(:animated)").animate({ backgroundPositionY: '+0px' }, 80);
    })
})