多個級聯的多個同時動畫

Question

我在教自己jQuery現在只是爲了好玩我以爲我會在這裏展開示例：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation。

我想編輯這個簡單的動畫，所以它都淡入淡出，然後淡出每個連續的矩形步驟。所以當第一次身高改變時，我希望它同時淡出。然後，隨着寬度的變化，我希望它同時淡入，等等等等。我想我明白瞭如何使用帶有fadeIn（）和fadeOut（）的函數回調來做到這一點，但最終發生的是所有動畫定義會同時運行。所以我使用「complete：」屬性嘗試了同樣的事情，但得到了相同的結果。我究竟做錯了什麼？幫幫我！提前致謝。

下面是我的動畫的代碼片段：

$(document).ready(function(){ 
      $("button").click(animation1()); 
     }); 

     function animation1() { 
      $("div").animate({height:300},{duration: 2000, queue: false}); 
      $("div").fadeOut({duration: 2000, queue:false, complete:animation2()); 
     } 

     function animation2() { 
      $("div").animate({width:300},{duration:2000,queue:false}); 
      $("div").fadeIn({duration: 2000, queue:false, complete:animation3()}); 
     } 

     function animation3() { 
      $("div").animate({height:100},{duration:2000,queue:false}); 
      $("div").fadeOut({duration:2000, queue:false, complete:animation4()}); 
     } 

     function animation4() { 
      $("div").animate({width:100},{duration:2000,queue:false}); 
      $("div").fadeIn({duration:2000,queue:false}); 
     } 

Answer 1

從complete回調，例如刪除括號

function animation1() { 
    $("div").animate({height:300},{duration: 2000, queue: false}); 
    $("div").fadeOut({duration: 2000, queue:false, complete:animation2}); 
}               no parens ^^^ 

另外，.fadeOut()使用來自.animate()不同的語法。功能應該是這樣的：

function animation1() { 
    $("div").animate({height:300},{duration: 2000, queue: false}); 
    $("div").fadeOut(2000, animation2); 
} 

我不會推薦使用W3Schools作爲您的主要JavaScript/jQuery /等。資源。替代方案：

• Mozilla的開發網HTML，CSS，JavaScript和more
• 的jQuery API docs jQuery的