javascript - アニメーションの終了後に addClass を行うにはどうすればよいですか?

Question

アニメーションの最後に CSS クラスを追加しようとしています。divここでは、 with classを移動し、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です。divはchangecolor単なる例です。色の変化だけを達成しようとしているわけではありません。アニメーションの最後またはアニメーション中に別のクラスをボックスに追加できるようにしたいと考えています。

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

クラスの追加を含め、すべてが機能しますが、アニメーションの最後にクラスを追加したいと思います。