スライド、サイズ変更、不透明度変更、揺れ、点滅などのアニメーションを実現するには、jQuery UI の Effects 系プラグインが便利だ。
-
jQuery UI の effect プラグインを使ったアニメーション動作
jQuery UI の effect プラグイン。effect() の 1つ目の引数は、アニメーション動作の種類。2つ目の引数は、1つ目の引数に指定したアニメーション動作固有のオプション。3つ目の引数はアニメーション動作速度。4つ目の引数は、アニメーション動作後に呼び出す関数。
-
jQuery UI の effect プラグインを使い点滅させる
jQuery UI の effect プラグインを使い、要素を点滅させる方法。effect() の1つ目の引数に、「pulsate」を指定する。3つ目の引数で、点滅速度を、ミリ秒単位で、調整できる。
-
jQuery UI で、ブラインドを開けるアニメーションで要素を非表示に
jQuery UI の effect プラグインを使い、ブラインドを開けるようなアニメーション動作で、要素を非表示にする方法。effect() の1つ目の引数に、「blind」を指定する。3つ目の引数で、非表示にするアニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI で、ボールが弾むようなアニメーション動作
jQuery UI の effect プラグインを使い、ボールが弾むようなアニメーション動作を、特定の要素にさせる方法。effect() の1つ目の引数に、「bounce」を指定する。3つ目の引数で、ボールが弾むようなアニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI で、クリップが挟むようなアニメーションで要素を非表示に
jQuery UI の effect プラグインを使い、クリップが物を挟み込むようなアニメーション動作で、要素を非表示にする方法。effect() の1つ目の引数に、「clip」を指定する。3つ目の引数で、クリップが物を挟み込むようなアニメーション動作の速度を、ミリ秒単位で、調整できる。
-
jQuery UI で、左へスライドしながら徐々に透明になるアニメーション
jQuery UI の effect プラグインを使い、左へスライドしながら徐々に透明になるアニメーション動作で、要素を非表示にする方法。effect() の1つ目の引数に、「drop」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で調整できる。
-
jQuery UI で、破裂するようなアニメーションで要素を非表示にする
jQuery UI の effect プラグインを使い、破裂するようなアニメーション動作で、要素を非表示にする方法。effect() の1つ目の引数に、「explode」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI で、徐々に透明になるアニメーション
jQuery UI の effect プラグインを使い、徐々に透明になるアニメーション動作で、要素を非表示にする方法。effect() の1つ目の引数に、「fade」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI で、下から上へ、次に、右から左へ折りたたむアニメーション
jQuery UI の effect プラグインを使い、下から上へ折りたたみ、次に、右から左へ折りたたむアニメーション動作で、要素を非表示にする方法。effect() の1つ目の引数に、「fold」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI の effect を使い、クリックで要素をハイライト表示
jQuery UI の effect プラグインを使い、クリックで、要素をハイライト表示する方法。effect() の1つ目の引数に、「highlight」を指定する。3つ目の引数で、ハイライト表示している時間を、ミリ秒単位で、調整できる。
-
jQuery UI で、徐々に膨らみながら透明になるアニメーション
jQuery UI の effect プラグインを使い、徐々に膨らみながら透明になるアニメーション動作で、要素を非表示にする方法。effect() の1つ目の引数に、「puff」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI の effect を使った、徐々に縮小するアニメーション
jQuery UI の effect プラグインを使い、徐々に縮小するアニメーション動作で、要素を縮小する方法。effect() の1つ目の引数に、「scale」を指定する。2つ目の引数で、縮小率を指定する。3つ目の引数で、徐々に縮小するアニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI の effect を使った、徐々に拡大するアニメーション
jQuery UI の effect プラグインを使い、徐々に拡大するアニメーション動作で、要素を拡大する方法。effect() の1つ目の引数に、「scale」を指定する。2つ目の引数で、拡大率を指定する。3つ目の引数で、徐々に拡大するアニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI の effect を使い、クリックで要素を横に揺らす
jQuery UI の effect プラグインを使い、クリックで、要素を横に揺らす方法。effect() の1つ目の引数に、「shake」を指定する。3つ目の引数で、横に揺れるアニメーション動作の速度を、ミリ秒単位で、調整できる。
-
jQuery UI で、要素のサイズを徐々に変更するアニメーション
jQuery UI の effect プラグインを使った、要素のサイズを徐々に変更するアニメーション。effect() の1つ目の引数に、「size」を指定する。2つ目の引数で、要素のサイズ（幅と高さ）を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI の effect を使いスライドアニメーションで要素を出現させる
jQuery UI の effect プラグインを使い、左から右へのスライドのアニメーション動作で、要素を出現させる方法。effect() の1つ目の引数に、「slide」を指定する。3つ目の引数で、スライドのアニメーション動作速度を、ミリ秒単位で、調整できる。
-
jQuery UI で、クリックした要素を特定の要素へ転送するアニメーション
jQuery UI の effect プラグインを使い、クリックした要素を、特定の要素へ転送するアニメーション。effect() の1つ目の引数に、「transfer」を指定する。2つ目の引数で、転送先を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。