Question

jquery如何animate防止叠加 例如我把鼠标不断移入移出 效果就会不断重复,如何防止呢?

Answer 1

stop() 方法停止当前正在运行的动画。

语法：

$(selector).stop(stopAll,goToEnd)

stopAll    可选。规定是否停止被选元素的所有加入队列的动画。    

goToEnd    

可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。

当开始另一个动画之前将之前的动画停止；

例如：

$("#start").click(function(){
    $("#box").stop().animate({height:300},"slow");
});
//如果是连续点击则会先停止上一个动画，开始下一个动画

Answer 2

在你的点击事件中加上一个判断假设产生动画效果目标的是target，那么你要加上这个判断if(!target.is(":animated")){}他会确保你的动画只会在上一个动画结束后才能产生，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉而$("#id").stop(true,false).animate({},1000);这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速用哪个你看着

Answer 3

animate方法前加个.stop()

追问

能举一个例子吗 谢谢

追答

$(element).hover(function(){
$(this).stop().animate({height:100},200);
},function(){
$(this).stop().animate({height:10},200);
})