transitionAnimateをバージョンアップ

以前、CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」というのを作成したのですが、これをプチバージョンアップ。 jQuery deferredに対応させました。

また、いろいろと使っていて不便な点を修正。

ダウンロード

これによりアニメーションの返り値でdoneなどのDeferredオブジェクトのメソッドが利用可能になります。

$("div").bind("click",function(){
	var foo = $(this).animate3({"width":"300px","height":"300px"},500,"ease",function(){
		$(this).css("background","blue");
	});
	foo.done(function(){
		alert("ok")
	})
})

サンプル

Deferredオブジェクトを利用すると以下のような複雑なアニメーションも簡単に実装可能になります。

$("div").bind("click",function(){
	var que=[],self = this;
  
	que[que.length] = $(self).animate3({
		"top":"100px"
	},500,"ease");
  
	que[que.length] = $.when(que[que.length-1]).pipe(function(){
		return $(self).animate3({
			"left":"100px"
		},500,"ease");
	});
  
	que[que.length] = $.when(que[que.length-1]).pipe(function(){
		return $(self).animate3({
			"top":"0px"
		},500,"ease");
	});
  
	que[que.length] = $.when(que[que.length-1]).pipe(function(){
		return $(self).animate3({
			"left":"0px"
		},500,"ease");
	});
})

サンプル

関連エントリー

iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
ブロックレベル要素の高さを揃えるheightLine.js
ページ内リンクをスマートにするsmoothScroll.js
アルファ画像を扱うalphafilter.jsライブラリ

スポンサードリンク

«[書評]よくわかるHTML5+CSS3の教科書 | メイン | jQuery Mobile スマートフォンサイト デザイン入門 3刷決定»