jQuery1.4.4からの新機能「.fadeToggle()」を試してみた。
紹介が滞ったりしていますが、それは置いといて、先日jQuery1.4.4がリリースされておりました。
ほとんどがバグ修正なんですが、一つだけ新機能として「.fadeToggle()」が追加されておりましたので、試してみました。
.fadeToggle()
Toggleと言えば、今までにもtoggle()やslideToggle()もありましたが、それと同じ類で、表示したり非表示にしたりを繰り返しする機能で、非表示になる時に、透明度のアニメーションがはいる動作をします。
さっそく動作をみてみましょう。
Script
$('button','#demo01').click(function(){
$('p','#demo01').fadeToggle();
});DEMO
消えたり出たり
最初のボタンクリックで最終的には消えて、もう一度ボタンをクリックすると消えたものが再び表示されます。今まで自分はこれを実現するのにtoggle()にfadeTo()を組み合わせて実現していましたが、今後はfadeToggle()を使えば一発ですね。
ちなみに、消えている時のdisplayの値はnoneになります。
display値はnoneになる
なので、デモのように、消えた時に外枠が縮みます。
消える速度
このfadeToggle()でも徐々に消えていく時の速さを指定できます。とりあえずfastとslowの二つを見てみましょう。
次のデモでは、どちらか好きな速度にチェックを入れてからボタンをクリックしてみてください。
DEMO
消えたり出たり
今後もますます便利な機能が増えていくようですが、次期バージョンは1.5になる予定だそうです。でるのがすでに楽しみだったりします！！
関連エントリー：
