jquery/javascript의 onfinish 이벤트 리스너

Question

안녕 얘들 아 내 현재 코드 조각입니다. 이 코드에 "onFinish 또는 Finished"이벤트 리스너를 추가하는 방법을 알고 싶습니다.

이 각각 케이스 내부 애니메이션 고유 될 setStage 함수

function setStage($section) 
    { 

    switch($section) 
    { 
     case "about": 
      if (stageSet == true) 
      { 
       resetStage(); 
      } 
      $("#one").animate({ width: "+=30", height: "+=30"}, 1000); 
      $("#two").animate({ width: "+=30", height: "+=30"}, 1000); 
      $("#three").animate({ height: "+=30"}, 1000); 
      $("#four").animate({ width: "+=30"}, 1000); 
      $("#five").animate({ width: "+=30"}, 1000); 
      stageSet = true; 
      break; 
     case "portfolio": 
      if (stageSet == true) 
      { 
       resetStage(); 
      } 
      $("#one").animate({ width: "+=30", height: "+=30"}, 1000); 
      $("#two").animate({ width: "+=30", height: "+=30"}, 1000); 
      $("#three").animate({ height: "+=30"}, 1000); 
      $("#four").animate({ width: "+=30"}, 1000); 
      $("#five").animate({ width: "+=30"}, 1000); 
      stageSet = true; 
      break; 
     case "contact": 
      if (stageSet == true) 
      { 
       resetStage(); 
      }; 
      $("#one").animate({ width: "+=30", height: "+=30"}, 1000); 
      $("#two").animate({ width: "+=30", height: "+=30"}, 1000); 
      $("#three").animate({ height: "+=30"}, 1000); 
      $("#four").animate({ width: "+=30"}, 1000); 
      $("#five").animate({ width: "+=30"}, 1000); 
      stageSet = true; 
      break; 
     case "resume": 
      if (stageSet == true) 
      { 
       resetStage(); 
      } 
      $("#one").animate({ width: "+=30", height: "+=30"}, 1000); 
      $("#two").animate({ width: "+=30", height: "+=30"}, 1000); 
      $("#three").animate({ height: "+=30"}, 1000); 
      $("#four").animate({ width: "+=30"}, 1000); 
      $("#five").animate({ width: "+=30"}, 1000); 
      stageSet = true; 
      break; 
     default: 
      alert('not a valid section'); 
      break; 
     } 
    } 

하지만 지금 막에 대한 애니메이션은 동일했다. 다음은 클릭에서 발생하는 사항입니다. 내가 뭘 필요하면이하는 각각의 탐색, "OFF"로 클래스를 적용하고, setStage이 완료되면 그때는 클래스 작동하지 않습니다 물론

$(".nav-btn").click(function() 
{ 
    var section = $(this).attr("title"); 
    //turn off pointer for obsessive clickers 
    $(".nav-btn").addClass("off"); 

    onComplete: function(setStage(section) 
    { 
     $(".nav-btn").removeClass("off"); 
    }); 
}); 

이 이륙 할 필요가있다. setStage 함수는 훌륭하게 작동합니다. 함수가 끝나면 클래스를 제거하기 만하면됩니다. jquery 사이트에서 api 이벤트 섹션을 확인하고 충분할만한 것을 보지 못했습니다. 아마 충분히 열심히 보지 않고있을 수도 있습니다. http://api.jquery.com/category/events/ 또는 어쩌면 내가 잘못된 섹션을 모두 찾고 있습니다. 이견있는 사람? 나의 noobness에서 저를 원조하기를 위해 미리 감사드립니다.

Answer 1

var removeClass = function() { 
    $(this).removeClass("off"); 
} 


    function setStage($section) 
{ 

switch($section) 
{ 
    case "about": 
    case "portfolio": 
    case "resume": // and so on 

     if (stageSet == true) 
     { 
      resetStage(); 
     } 
     $("#one").animate({ width: "+=30", height: "+=30"}, 1000, removeClass); 
     $("#two").animate({ width: "+=30", height: "+=30"}, 1000, removeClass); 
     $("#three").animate({ height: "+=30"}, 1000, removeClass);