deferred objects

HTML

<div id='div1'></div>
<div id='div2'></div>
<button>Click</button>

CSS

div {
    display: inline-block;
    width: 100px;
    height: 100px;
}

#div1 {
    background: olive;
}

#div2 {
    background: teal;
}

JavaScript

var animations = [animation_a, animation_b];

function run_next() {
    if ( animations.length > 0 ) {
        next_animation = animations.shift();
        next_animation();
    }
}

$("button").click( run_next );

function animation_a() {
    $("#div1").slideUp(2000, run_next);
} 

function animation_b() {
    $("#div2").slideUp(2000, run_next);
}