Home > 技術 > jQuery.animateを順番に実行するaddCommand作りました - jQuery Plugin

jQuery.animateを順番に実行するaddCommand作りました - jQuery Plugin

jQueryで1つのアニメーションが終わったあとに、違うアニメーションを実行させたい場合は、callbackを使う必要があります。

これだとちょっとネストしちゃうし、なんとなく使い勝手が悪いので、セットした順番にアニメーション処理を実行するFlashのライブラリProgressionのaddCommandっぽいものを作ってみました。

何かJavaScriptでアニメーション作品を作ろうとすると必ずこの「1つずつアニメーション問題」が発生するので、この手の作品作りで何かの役にたてば幸いです!

addCommand - jQuery Plugin

使い方

Prop($.css)とDoTweener($.animate)というクラスを渡したり、functionを渡したり、さらに一気にアニメーションさせるように配列にDoTweenerを詰めて渡したり出来ます。

詳細

細かい使い方は以下のサイトに用意しましたので、参考までに。

addCommand - jQuery Plugin

サンプル動画

あと1個前のエントリーでJavaScriptでスクロールバーを波打たせる - Scrollbars Experimentを紹介しましたが、それっぽいことをaddCommandを使って作ってみました。

addCommand - Screencast from hisasann on Vimeo.

サンプル動画のソースコード

gist: 190118 - GitHub


またこの他のライブラリや作品はhisasann.comに掲載していますので、是非ご覧ください。

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1213
Listed below are links to weblogs that reference
jQuery.animateを順番に実行するaddCommand作りました - jQuery Plugin from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > jQuery.animateを順番に実行するaddCommand作りました - jQuery Plugin

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top