• twitter
  • Facebook
  • はてなブックマーク
2012年06月03日(日)

[jQueryUI入門] アニメーションエフェクトのパラメータ

jQueryUIのEffectで各エフェクトに渡すパラメータのメモです。パラメータは第二引数に指定して、各エフェクトの挙動を変更します。ほとんどのエフェクトはデフォルトの値があるため、固有の値を指定したい場合などにパラメータオブジェクトの中に渡して使います。(scale、transferは指定が必須)

パラメータの指定方法

jquery.effects.core.jsファイルと、使いたいエフェクトファイルを個別にロードします。speedは、‘slow’ ‘normal’ ‘fast’またはミリ秒で指定。callbackはエフェクト完了後に実行するコールバック関数です。指定しなくても動作します。パラメータは、オブジェクト形式で渡します。

  1. $("selecter").effect('エフェクトの種類', {パラメータ}, speed(ms), callback関数);

表示、非表示でエフェクトを使う方法

エフェクトを表示として使うか?非表示として使うか?トグルで切り替えて使うか?によって、パラメータにモードの指定が出来ます。または、showメソッド、hideメソッド、toggleメソッドをコールします。

  1. // 表示でエフェクトを使う
  2. $("selecter").show('エフェクトの種類', {パラメータ}, speed(ms), callback関数);
  3. // 非表示でエフェクトを使う
  4. $("selecter").hide('エフェクトの種類', {パラメータ}, speed(ms), callback関数);
  5. // 表示・非表示切り替えでエフェクトを使う
  6. $("selecter").toggle('エフェクトの種類', {パラメータ}, speed(ms), callback関数);

clipのパラメータ

  • direction 開閉される方向(‘vertical’)デフォルトは横方向

blindのパラメータ

  • direction ブラインドの向う方向(‘vertical’)デフォルトは横方向

bounceのパラメータ

  • direction 揺れる方向(‘up’ ‘down’)デフォルトはup
  • distance 揺れ幅(数値)デフォルトは20
  • times 揺れが実行される回数(数値)デフォルトは5回
  • speed 各揺れ幅が実行される時間(数値)デフォルトはspeedで指定した値

explodeのパラメータ

  • rows スライスが分割される行の数(デフォルトは3分割)
  • cols スライスが分割される列の数(デフォルトは3分割)

foldのパラメータ

  • size 折りたたみのサイズ(数値)デフォルトは15
  • horizFirst 折りたたみが先かどうか(trueまたはfalse)デフォルトはtrue

highlightのパラメータ

  • color ハイライトに使われる色(デフォルトは#FFFF99)

pulsateのパラメータ

  • times 点滅する回数(数値)デフォルトは5回

scaleのパラメータ

  • percent 拡大縮小される割合(数値)デフォルトは100
  • direction 拡大縮小される対象(‘horizontal’または’vertical’)デフォルトは’both’

shakeのパラメータ

  • direction 揺れる方向(‘up’または’down’)デフォルトは’left’
  • distance シェイクされる距離(数値)デフォルトは20px
  • times 揺れる回数(数値)デフォルトは3回
  • duration それぞれの揺れが発生する時間(数値)デフォルトは140ms

slideのパラメータ

  • direction スライドされる方向(‘left’ ‘right’ ‘top’ ‘bottom’)デフォルトは’left’
  • distance どのくらいスライドされるか(数値)デフォルトは対象の横幅

transferのパラメータ

  • className 移転する時に指定されるCSSクラス名
  • to 移転する対象のセレクタ文字列

関連投稿記事

Comment: