在做一个鼠标进出图片,遮罩层上下移动时,遇见的问题(如图所示:):
只要用鼠标不断进出图片,因动画未执行完成就触发下一个事件,使动画效果滞后和反复执行,效果非常不佳.
解决办法如下:
利用jQuery的stop()方法.如下图:
$(".masked").mouseover(function(){ $(".mask").stop().animate({ "top":"0px" },500) }) .mouseout(function(){ $(".mask").stop().animate({ "top":"80%" },1000); });
stop()介绍:
//语法结构
$("#div").stop();//停止当前动画,继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态