jQuery: chaining animations with deferred objects

by gabrieleromanato

HTML

<div id="test-a"></div>
<div id="test-b"></div>

CSS

div {
    margin: 1em;
    width: 100px;
    height: 100px;
    position: relative;
}

#test-a {
    background: green;
}

#test-b {
    background: blue;
}

JavaScript

$.Deferred(function(def) {
    $('#test-a').animate({
        left: 100
    });
}).done(function(def) {


    $('#test-b').delay(1000).animate({
        top: -116
    });


}).resolve();