Как добавить класс после завершения анимации?

Question

Я пытаюсь добавить класс CSS в конце анимации. Здесь у меня есть базовая анимация, которая перемещает div с классом box, добавляет радиус границы и меняет цвет фона. В конце этого я хочу добавить класс под названием 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. Я не пытаюсь добиться изменения цвета. Я хочу, чтобы в конце моей анимации или, возможно, во время анимации, был добавлен другой класс.

.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://jsfiddle.net/x27Ar/1/