2011年09月28日

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


posted by ねこまんま at 11:10 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。