更新)この記事は賞味期限切れです。今回これを書いてみたのは、ローテクでごくシンプルな物が欲しかったから。言ってみれば、それらの選択肢をまだ知らなかったから。GithubMovieCrop.jsは、CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。名前から推察されるように、ActionScriptのMovieClipを模して作った...つもりです。再生/逆再生/停止/巻き戻しが出来ます。簡単な使い方まず使用する画像を作成し、ブロック要素の背景にします。要するにブロック要素のサイズの分だけ背景をズラしていってアニメーションさせる仕組みなので、そのような画像を用意します。アニメーションの再生方法は、jQueryオブジェクトのmoviePlay()メソッドをコールするだけです。$(".loading").moviePlay();逆再生・停止・巻き戻しも同じ要領で。最初のコマに巻き戻す動きをカスタマイズする動きをカスタマイズするには、moviePlay/movieReverseメソッドにオプションを渡します。アニメーションの方向});完了時のコールバックを設定するアニメーション完了時のコールバックを、moviePlay/movieReverseの第二引数で設定できます。このコールバックは、アニメーションが「完了」しないと呼ばれません。オプションのrepeatをfalseに設定し、最後のコマまで進んだ時初めて呼ばれます。console.log("アニメーションが完了しました");});MovieCropクラスMovieCropクラスのインスタンスを生成して使う事もできます。この場合は、第一引数にはjQueryオブジェクトではなく、HTMLElementを渡して下さい。20});mc.play();MovieCropクラスは次のメソッドを持ちます。jsfiddleまとめ冒頭で申し上げた通り、この手のソリューションは他にも優秀な選択肢があります。じき発表されるAdobeFlashCS6は、FlashIDEで制作したアニメーションからCSSスプライトシートを書き出す事ができ、そこからそのままアニメーションさせる事が出来るスグレモノです。スプライトアニメーションは素材の画像を作るのが恐らく一番面倒なので、こうしたアプリケーションは大変助かりますね。このライブラリをいつ使うのかと言うと...。シンプルさ故にライブラリ間の競合の不安が少し減る程度の存在意義は...あるかな。jQueryUIのDialogをカスタマイズする6つの物凄く細かい小技コメントコメントを書くコメントをキャンセルメールアドレスが公開されることはありません。website横浜で活動するフリーランスのWeb屋さん。