Toggle / 表示切替

アニメーション動作させながら、要素の表示/非表示を切り替えたい場合には、jQuery UI の Toggle が便利だ。

• jQuery UI の toggle を使いアニメーション動作で表示/非表示

  jQuery UI の toggle プラグインについて。toggle() の 1つ目の引数は、アニメーション動作の種類。2つ目の引数は、1つ目の引数に指定したアニメーション動作固有のオプション。3つ目の引数はアニメーション動作速度。4つ目の引数は、アニメーション動作後に呼び出す関数。

• jQuery UI の toggle を使い、色やサイズをアニメーションで切替

  jQuery UI の toggle プラグインを使い、色やサイズをアニメーション動作で切り替える方法。「切替」ボタンを押すと、「アニメーション」というタイトルのボックスの色とサイズをアニメーション動作で切り替える。

• jQuery UI の toggle で、ブラインドを開閉するようなアニメーション

  jQuery UI の toggle プラグインを使い、ブラインドを開閉するようなアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「blind」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle を使い、弾むようなアニメーションで表示/非表示

  jQuery UI の toggle プラグインを使い、ボールが弾むようなアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「bounce」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle で、クリップが挟むようなアニメーションの表示切替

  jQuery UI の toggle プラグインを使い、クリップが物を挟み込むようなアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「clip」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle で、スライドして透明/不透明になるアニメーション

  jQuery UI の toggle プラグインを使い、スライドしながら徐々に透明/不透明になるアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「drop」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle で、破裂するようなアニメーションの表示切替

  jQuery UI の toggle プラグインを使い、破裂するようなアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「explode」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle で、折りたたむようなアニメーションの表示切替

  jQuery UI の toggle プラグインを使い、折りたたむようなアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「fold」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI で、ハイライト表示し徐々に透明/不透明になるアニメーション

  jQuery UI の toggle プラグインを使い、要素をハイライト表示し、徐々に透明/不透明になるアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「highlight」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI で、膨らみながら透明/縮みながら不透明のアニメーション

  jQuery UI の toggle プラグインを使い、膨らみながら徐々に透明になる、もしくは、縮みながら徐々に不透明になるアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「puff」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle を使い、点滅させながら表示/非表示を切替

  jQuery UI の toggle プラグインを使い、要素を点滅させながら、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「pulsate」を指定する。3つ目の引数で、点滅アニメーションの速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle で、縮小/拡大するアニメーションの表示切替

  jQuery UI の toggle プラグインを使い、徐々に縮小/拡大するアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「scale」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle で、横に揺らすアニメーションの表示切替

  jQuery UI の toggle プラグインを使い、要素を横に揺らすアニメーション動作。toggle() の1つ目の引数に、「shake」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle を使い、スライドするアニメーションで表示切替

  jQuery UI の toggle プラグインを使い、スライドするアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「slide」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。

• jQuery UI の toggle で、透明⇔不透明のアニメーションの表示切替

  jQuery UI の toggle プラグインを使い、徐々に不透明から透明になる、もしくは、徐々に透明から不透明になるアニメーション動作で、要素の表示/非表示を切り替える方法。toggle() の1つ目の引数に、「fade」を指定する。3つ目の引数で、アニメーション動作速度を、ミリ秒単位で、調整できる。