如何爲頁面中的所有動畫添加常見回調？

Question

我目前正在開發一個包含許多動畫的網頁。

代碼示例

<div id="a1"> 
    <img src="aaa/Test1.png" style="display:none;" id="img1"/> 
</div> 
<div id="a2"> 
    <img src="aaa/Test2.png" style="display:none;" id="img2"/> 
</div> 
<div id="a3"> 
    <img src="aaa/Test3.png" style="display:none;" id="img3"/> 
</div> 
<script>   
    $("#img1").fadeIn(3000); 
    $("#img2").fadeIn(3000); 
    $("#img3").animate({ 
      'marginLeft' : "0px" 
     }, 2000); 
</script> 

我想補充常見的回調每個動畫結束後調用。我不想寫這樣

$("#img1").fadeIn(3000,function(){callback();}); 
$("#img2").fadeIn(3000,function(){callback();}); 
$("#img3").animate({ 
    'marginLeft' : "0px" 
}, 2000,function(){callback();}); 

我只想補充回調作爲一個整體（像jQuery的$給人的風格所有的div（「DIV」）的CSS（「高度」，「100像素」）。 ）

有沒有這樣的代碼給頁面中的所有動畫回調？

Answer 1

你真的需要綁定每個img？如果綁定屬性相同，最好給它們一個類和目標。

總之：

$("#img1").fadeIn(3000,callback); //notice the use of the function name without trailing "()" 
$("#img2").fadeIn(3000,callback); 

function callback() { 
//you can use $(this) here 
} 

Answer 2

ID是用來做項目獨特indentifier。使用類

改變所有的圖像標籤，並添加類

<img src="aaa/Test1.png" style="display:none;" class="my_img"/> 

然後在jQuery的使用

$(".my_img").fadeIn(3000,function(){callback();}); 

或任何ü希望。此代碼將fadeIn綁定到類「my_img」的所有項目，如果要將其綁定到div中具有my_img類的所有圖像，您可以使用

$("div img.my_img").fadeIn(3000,function(){callback();});