jQuery动画连续触发、滞后反复执行解决办法

在做一个鼠标进出图片,遮罩层上下移动时,遇见的问题(如图所示:):

只要用鼠标不断进出图片,因动画未执行完成就触发下一个事件,使动画效果滞后和反复执行,效果非常不佳.

 

解决办法如下:

利用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);//清除元素的所有动画，让当前动画直接到达末状态