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