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;//回到最初始狀態,也是也表示這一輪動畫執行完畢。
});
}