code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery UI Effects一覧

jQuery UI Effects(アニメーションエフェクト)のまとめ。

jQuery UI 1.8.16をベースとしている。

公式ドキュメントのEffect一覧

公式ドキュメントでは、『Effects that can be used with Show/Hide/Toggle』(Show/Hide/Toggleで利用可能なエフェクト)と『Effects that can be only used stand-alone』(単独でのみ利用可能なエフェクト)と分けて書かれているが、例えばBounceはshow/hide/toggleで利用できたりするので、ドキュメントが最新でない可能性がある。

$('#effects').toggle('bounce');

Show/Hide/Toggleで使うアニメーションエフェクト

Blind - 目隠(水平、垂直)

水平(左方向)もしくは垂直(上方向)に、カーテン・ブラインド(日よけ)のように開閉するアニメーション。

direction: mode: hide/show
Blind

Clip - 切抜(水平、垂直)

垂直方向、あるは水平方向に中心に向かって挟みこむ(クリップする)ようなアニメーション。

direction: mode: hide/show
Clip

Drop - 落下(上下左右)

滴が落ちるように、透明になりながら移動していくアニメーション。

direction: mode: hide/show
Drop

Explode - 爆発(破片)

破片に分かれ、四方八方に散っていくアニメーション。

pieces: mode: hide/show
Explode

Fade - 衰退

jQueryにあるfadeIn/Out/Toと同じ効果。徐々に薄くなって消える。表示する際は逆に徐々に濃くなりながら表示される。指定可能なオプションはない、と公式ドキュメントにはあるがmode: hide/showが指定可能なである(effect関数時)。

Fade

Fold - 折畳

折り紙のように2段階で折り畳みながら消えていくアニメーション。表示する際はその逆方向。

horizFirst: size: mode: hide/show
Fold

Puff - 膨張

膨張しながらフェードアウト(段々と薄くなっていく)するアニメーション。表示の際はその逆。

percent: mode: hide/show
Puff

Slide - 滑走

滑るように移動するアニメーション。Blindはそのボックスのサイズが縮んでいくアニメーション(中の文字もボックスのサイズに合わせて移動する)だが、このアニメーションはサイズを変えずに移動していくのが特徴。

direction: distance: mode: hide/show
Slide

Scale - 拡縮

拡大したり縮小するアニメーション。オプションのboxはborderとpaddingのみを拡大・縮小し、contentはpaddingよりも内側のコンテンツを拡大・縮小する。bothで全ての要素が拡縮する。

directionは、hideの時しか効かない(1.8.16現在。不具合かもしれない?)。
fromは、{height: 100, width: 100}などと指定し、アニメーションの起点(hideでもshowでも起点)を表す。
公式ドキュメントにはないがmode: hide/showが指定可能(effect関数時)。
direction: from(height,width): origin: percent: scale:
Scale

単独[effect()]で使うアニメーションエフェクト

Bounce - 反発(水平、垂直)

弾むエフェクト。弾むだけも表現できるし、弾んだ結果消えたり、弾みながら表示させることができる。

direction: distance: mode: times:
Bounce

Highlight - 強調

指定された色で強調するエフェクト。

color: mode:
Highlight

Pulsate - 鼓動

心臓の鼓動のようなエフェクト。

mode: times:
Pulsate

Shake - 振動(水平、垂直)

揺れるエフェクト。

direction: distance: times:
Shake

Size - 変更(幅、高さ)

ボックスのサイズをアニメーションしながら指定のサイズ(from)から指定のサイズ(to)へと変更するエフェクト。Scaleと同様、boxはborderとpaddingのみを拡大・縮小し、contentはpaddingよりも内側を拡大・縮小する。bothで全ての要素が拡縮。

from(height,width): to(height,width): origin: scale:
Size

Transfer - 転移

指定のボックスの輪郭を別の場所のボックスまで移動させるエフェクト。ボックス自体は移動しないが移動したように見せる。

移動中のスタイルはui-effects-transferクラスに対して修飾するかclassNameオプションでクラス名を指定する。

toには移動先のselectorを指定するが省略するとエラーとなる(1.8.16現在)。

className: to:
Transfer
関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。