THE HAM MEDIA BLOG

jQuery1.4.4からの新機能「.fadeToggle()」を試してみた。

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
FADE
jquery

jQuery

紹介が滞ったりしていますが、それは置いといて、先日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になる予定だそうです。でるのがすでに楽しみだったりします!!

関連エントリー:
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。