jQuery Deferredを利用したイケテルアニメーション制御

jQuery Deferredを利用したイケテルアニメーション制御、もっといい方法があるかもしれないので暫定版。

var que01 = $("#box1").animate({left:"100px"});
var que02 = $.when(que01).pipe(function(){
    return $("#box2").animate({top:"100px"});
});
var que03 = $.when(que02).pipe(function(){
    return $("#box1").animate({top:"100px"});
});
var que04 = $.when(que03).pipe(function(){
    return $("#box2").animate({left:"100px"});
});
var que05_1 = $.when(que04).pipe(function(){
    return $("#box1").animate({left:0,top:0});
});
var que05_2 = $.when(que04).pipe(function(){
    return $("#box2").animate({left:"200px",top:"200px"});
})

サンプル

jQuery Deferredの遅延を利用して擬似的にキューを作成していくイメージ、入れ子祭りを防ぐだけでなく複数のアニメーションを同時に実行したり、複数のアニメーションが終った際に実行したい処理を制御できたりと結構便利。