jQuery animate() repeat 3x

Question

열린 상자가 최소화되고 모든 슬라이드가 왼쪽으로 이동하고 클릭 한 상자가 펼쳐지는 3 단계 애니메이션을 수행하려고합니다. 선택한 애니메이션 상자를 확장하는 마지막 애니메이션은 두 번째 애니메이션의 인수로 호출 될 때 3x를 반복하지만, 혼자서 호출하면 잘 동작합니다.

의 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

나는 당신의 HTML이 어떻게 보이는지 모르겠지만, 그것은 당신의 클릭은 다른 요소까지 버블 링이 동작을 일으키는 것이 될 수에서 개최했다.

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