オリジナルjQuery プラグインの作り方 【実践編】アニメーションオプションの設定

[`brogumura` not found]

*ここで制作するプラグインのサンプルはGitHubで見ることが出来ます。

前回までの記事ではアニメーション処理はフェードだけでしたが、今回はそのほかのオプション(top,right,bottom,left)を実装していきたいと思います。

前回までのおさらい

以下のコードは前回作成したものです。この46行目から69行目までがフェード効果の処理ですが、今回は上、右、下、左のスライド処理効果をそれぞれ72行目、74行目、76行目、78行目に加えていきたいと思います。

今回の記事で出来るもの

今回の記事でできるものは以下の通りです。

デフォルト(フェード)


オプション(top)


オプション(right)


オプション(bottom)


オプション(left)


まずはスライド効果、topを作ってみようと思います。

以下がtopスライドアニメーションのコードの抜粋です

1行目で画像の個数を変数に代入しています。

2行目で画像の位置をtop:'-100%'にして上方向にずらします。

5行目のimageChange関数でjqueryのanimationメソッドで画像が上から下にスライドしていく効果を設定し、最後の27行目でオプションの秒数setting.changeTimeの値の間隔でsetIntervalをして繰り返し実行しています。

あとのright,bottom,leftオプションは上記のtopアニメーションの向きが変わるだけですので、.animate({top:'0%'})と設定しているところをそれぞれ.animate({right:'0%'})というように変更すれば完成です。

今回の目標の完成コードが以下の通りです。

top,right,bottom,leftと同じような処理が続いているところは本来は一つの関数にまとめてこれまたオプションで変更点だけを設定するということをしたほうが美しいのですが、その設定の方法は次回説明いたします。

*ここで制作したプラグインのサンプルはGitHubで見ることが出来ます。

Please follow and like us:
20

andy

プログラマ、フロントエンドエンジニアです。 1988年生まれ Java(JavaEE,JavaFX,Android),Javascript,TypeScript,Angularjs,Backbone.jsなど使っています フリーランスです。 ご相談お待ちしております。 GitHub github.com/kotaroyamame *イラスト制作moom

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*