动画后更新类

Question

我有以下功能：

setTimeout(function() { 
    $("#em")
    .animate(
    { left: -15 }, {
        duration: "slow",
        easing: "easeOutBack"
    })
    .animate(
    { left: -315 }, {
        duration: "slow",
        easing: "easeOutBack"
    });                         
}, 2000);

我希望在动画完成后更改另一个元素上的类

$('.flip').removeClass('ui-icon-carat-1-w').addClass('ui-icon-carat-1-e');

如何将这两者捆绑在一起？

Answer 1

.animate()可以接受回调作为其最后一个参数;如果你为它提供了一个函数，那么该函数将在动画完成后执行。

当使用带有options的替代语法作为对象时，使用键"complete"提供回调。所以你有：

$("#em")
.animate(
{ left: -15 }, {
    duration: "slow",
    easing: "easeOutBack",
    complete: function() {
       $('.flip').removeClass('ui-icon-carat-1-w').addClass('ui-icon-carat-1-e');
    }
})

Answer 2

animate()方法接受将在动画结束后运行的回调。