複数の同時アニメーションの複数のカスケード

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); 
} 

プライマリJavaScript/jQuery/etcとしてW3Schoolsを使用することはお勧めしません。リソース。代替：

• Mozillaのデベロッパー・ネットワークHTML、CSS、JavaScript、およびmore
• ためjQuery API docs jQueryの
ため