Twitter

jQuery.Deferredで順番にアニメーションを実行する

2013/02/25 | jquery | コメント (0)

要素をアニメーションさせて印象的に見せる「動きのあるメインビジュアル」は以前まで主にFlashが使われていましたが、最近ではJavascriptで実装されているものが増えてきています。Javascriptを利用したアニメーションは、jQueryとEasing Pluginを使うことで比較的簡単に個々の動きをつけることができます。

個々に設定したアニメーションを順番に再生するために、今まで自分はdelay()やコールバックを利用していましたが、Web Designing(2013.03)にjQueryのDeferredオブジェクトを利用して関数を順番に実行する方法が載っていたので処理の流れを確認するためメモを兼ねてコードを自分なりに整理してみました。

個人的に今回のポイントとなるのはjQuery.Deferredとスキップボタンに使用するstop()。
調べてみるとstop()の引数には実は色々使える機能がありました。以下のコードではstop()を利用してアニメーションの最後のコマへとジャンプさせています。

+more read

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top