jQuery animate（）repeat 3x

Question

私は3つの段階のアニメーションを実行しようとしています。開いているボックスが最小化され、すべてが左にスライドし、クリックされたボックスが拡大されます。選択したボックスを展開する最後のアニメーションは、2番目のアニメーションの引数として呼び出されたときに3xを繰り返しますが、それを単独で呼び出すとうまく動作します。

その私はあなたのHTMLがどのように見えるかわからないが、それはあなたのクリックが他の要素にまで泡立てると、この動作を引き起こしている可能性がありhttp://st-catherineschool.org/xbox/

$("#box2").click(
    function(){ 
     box = 2; 
     if(boxopen==box)return; 
     $("#box"+boxopen).animate({height:"-=30%", width:"-=10%", top:"+=20%", fontSize:"14px"}, 500, null, 
     function(){ 
     $("section").animate({right:"+=25%"},500,null, 
     function(){ 
      $("#box"+box).animate({height:"+=30%", width:"+=10%", top:"-=20%"}, 500); 
      $("#box"+boxopen).css("z-index", "8"); 
      $("#box"+box).css("z-level", "9"); 
      boxopen = box; 
     }); 
     }); 
    }); 

Answer 1

私はあなたがマッチした要素の任意の現在実行中のアニメーションを停止しjQuery#stop()、探していると思う：これを防ぐために、stopPropagation()

EXを使用しています。何も変化しない）（

// instead of: 
$('section').animate(…); 
// try this: 
$('section').stop().animate(…); 

Answer 2

でホストされています。

$("#box2").click(
    function(e){ 
     e.stopPropagation(); 
     box = 2; 
     .....