【jQuery】エフェクトの種類

Tweet

Category JavaScript 2012/01/29

問題

$(“#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の説明