애니메이션이 끝나면 어떻게 추가합니까?

Question

애니메이션 끝 부분에 CSS 클래스를 추가하려고합니다. 여기에 클래스 box으로 div을 이동하고 테두리 반경을 추가하고 배경색을 변경하는 기본 애니메이션이 있습니다. 이 마지막에는 changecolor이라는 클래스를 추가하고 싶습니다. divbox이 클릭되면 수업을 제외한 모든 기능이 작동합니다.

$(document).ready(function() { 
    var e = $('.box'); 
    e.click(function() { 
     e.animate({left: '200px'}, 2000); 
     e.animate({borderRadius: '100px'}, 2000); 
     e.animate({backgroundColor: '#22222'}, 1000); 
     e.addClass('changecolor'); 
    }); 
}); 

내 CSS. changecolor div는 하나의 예입니다. 나는 단지 색 변화를 이루려는 것이 아닙니다. 내 애니메이션이 끝날 때나 애니메이션 중에 상자에 다른 클래스를 추가 할 수 있기를 원합니다.

.box { 
    position:absolute; 
    width:100px; 
    height:100px; 
    background-color:#A3D900 
} 
.change { 
    background-color:red; 
} 

모든 것은 클래스 추가를 포함하여 작동하지만 애니메이션 끝 부분에 클래스를 추가하려고합니다.

Answer 1

이 시도 :

e.animate({backgroundColor:'#22222'},1000, function() { 
    e.addClass('changecolor'); 
    // Animation complete. 
    }); 

단순히 complete callback를 추가.

데모 : http://api.jquery.com/animate/ : http://jsfiddle.net/x27Ar/1/