SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【jQuery】エフェクトの種類

問題

$(“#hoge”).show() などをするときに、エフェクトが追加できるよね。 これ何が指定できるの?

$("#hoge").show() //エフェクトなしで表示する
$("#hoge").show("slow") //ゆっくり表示する(左上からびよーんと出てくる感じで)
$("#hoge").show("fade") //フェードインする

答え

$(“#hoge”).show() するときや、jqueryuiのdialog(ダイアログ)の表示時などに、横から現れたり、上から現れたり、フェードインしたり、いろんな効果を指定できる。

そんな効果についてのメモ。

jquery単体だと

jquery単体だと、利用できるエフェクトはデフォルトのswingと、linearのみ。

ボタンで開閉します。

 

jQuery単体で”fade”などを指定すると、エラーになる。

TypeError: f.easing[i.animatedProperties[this.prop]] is not a function

jQueryUIを読み込んでいると使える効果

‘blind’, ‘bounce’, ‘clip’, ‘drop’, ‘explode’, ‘fade’, ‘fold’, ‘highlight’, ‘puff’, ‘pulsate’, ‘scale’, ‘shake’, ‘size’, ‘slide’, ‘transfer’.

デモ)

ボタンで開閉します。
デモがいい加減なため、姿が消えたまま帰ってこなくなることがあります。
再読み込みしてやってください

 

もっと? そんなときに登場するのが、jquery.easingプラグイン。あちこちでよく使われていると思う。

jQuery Easing Plugin を読み込んでいると使える効果

jswing, def, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce,

気持ちのよい動きや一味違った動きをを追求したい方はお試しあれ。デモはこちら。

http://gsgd.co.uk/sandbox/jquery/easing/

参考

jqueryuiのeffectのデモ

jqueryuiのshowのデモ

jqueryのshowの説明

関連するメモ

コメント(4)

yoshimura 2012年1月29日 16:33

コメントありがとうございます。
$(“#target”).dialog({show: “slide”}) ←この”slide”の部分に、他に何が指定できるのか?のメモでした。
単純にフェードインなどしたいときは .fadeIn() などがいいですよね。

sutara_lumpur 2012年1月29日 17:42

あ、申し訳ありません。
早合点してしまいました。

yoshimura 2012年1月29日 22:06

いえいえ、コメントいただけるとうれしいです。
コメントのURLなども見て、jQueryのいろんなところを見てもらえますし。
またよろしくお願いします。