javascript - 动画完成后如何添加类？

Question

我正在尝试在动画末尾添加一个 CSS 类。在这里，我有一个基本动画，它移动divwith 类box，添加边框半径并更改背景颜色。最后，我想添加一个名为changecolor. 一切正常，除了在div box单击时添加类。

$(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。changecolordiv 只是一个例子。我不想仅仅实现颜色变化。我希望能够在动画结束时或在动画期间向框添加不同的类。

.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回调。

演示：http: //jsfiddle.net/x27Ar/1/