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

Question

我正在尝试在动画末尾添加 CSS 类。这里我有一个基本的动画，它使用 box 类移动 div，添加边框半径并更改背景颜色。最后我想添加一个名为 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。 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://jsfiddle.net/x27Ar/1/