jQuery Deferred with animation

HTML

<div id="box1"> </div><div id="box2"> </div>

CSS

div{
    width:100px;
    height:100px;
    background:red;
    position:relative
}
#box2{
    background:blue
}

JavaScript

var $box1 = $('#box1'),
	$box2 = $('#box2');

$box1.click(function(){
	$.when($box1.animate({left : '100px'}))
  	.done(function(){
    	return $box2.animate({top : '100px'})
    })
    .done(function(){
    	$box1.animate({left : '100px'})
    })
})