Question

I have the following function:

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

and I would like to changed the class on another element after the animation is complete

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

How do I tie those two together?

Answer 1

.animate() can accept a callback as its last argument; if you provide a function for it, the function will be executed when the animation has completed.

When using the alternative syntax with options as an object, provide the callback using the key "complete". So you ‘d have:

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