Question

用jQuery动画来做特效，怎么防止多次点击动画重复的问题？

我用 jQuery写了一个效果，就是类似那种冒泡提示，在点一个A链接时，一个Div浮起来显示一下，然后2秒钟后在消失，可是现在有个问题，如果我用鼠标一下子点好几次，那么这个动画就会一直出现-消失，这样重复好几次，请问有什么办法可以解决这个问题吗？

Answer 1

1、在你的点击事件中加上一个判断，假设产生动画效果目标的是#aa这个节点，那么你要加上这个判断
if(!$("#aa").is(":animated")){
//执行你的操作
}
他会确保你的动画只会在上一个动画结束后才能产生 ，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉

2、$("#aa").stop(true,false).animate({...},1000);
这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速
说到这里我们解释下stop（）这个函数的用法。

stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。
stop在新版jQuery中添加了2个参数：
第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；
第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候

3、第三种方法应用就需要设置一个判断是否处于动画的标志，一般是一个点击事件执行N多个步骤的动画之后然后跳到下一个动画。
var flag = false;
function aa(){
if(flag) return;//这里指当这个标志flag为真的时候，直接返回，不执行当前的这个动画。
flag=true;//这里是在执行这个动画的最开始的时候把标志flag设置为真，在这个动画没执行完之前这个值一直为真，当下次运行这个函数的时候，由于flag值为真，也不会执行。必须等到这个函数执行完之后才会再次执行这个动画。
……………….
………………..
………………..
$(“#aa”).animated({“left”:”100″},1000,function(){
………………….
flag=false;//回到最初始状态，也是也表示这一轮动画执行完毕。
});
}

Answer 2

$("#id").stop(true,false).animate({...},1000);
用这句话就行了，stop(true,false)什么意思你可以网上查下，我简单说下：
前面的true表示停止被选元素的所有加入队列的动画
后面的false表示是否允许完成当前的动画

Answer 3

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

Answer 4

方法有很多。点击后使链接无效；或用DetachEvent取消该链接的Click事件；或加状态变量或属性，在执行动画前进行判断