【JQuery】フェード(fade~out/in/to/toggle)

投稿者: | 2020年11月6日
JQueryアイキャッチ画像

 今回はフェードについて解説していきたいと思います。

フェードは薄っすらと消えていったり、表示したりする機能でそれをOpacity(透明度)によって動作させています。

それではいってみましょう(*゚▽゚)ノ

 

fadeOutさせながら隠す

構文

fadeOut(ミリ秒)

 

fadeOutサンプル

下記の例は1秒かけてOpacty属性でfadeOutさせ、最後はdisplay属性がnoneになり非表示になります。

引数に時間を指定できます。1000ミリ秒→1秒

fadeOut

 

fadeInしながら表示させる

構文

fadeIn(ミリ秒)
 

fadeInサンプル

下記の例は1秒かけてOpacty属性でfadeInさせます。

引数に時間を指定できます。1000ミリ秒→1秒

fadeIn

 

fadeToggle
表示してたらfadeOutで隠し、隠れたらfadeInで表示

構文

fadeToggle(ミリ秒)
 

fadeToggleサンプル

下記の例は1秒かけてOpacty属性でfadeToggleさせます。

引数に時間を指定できます。1000ミリ秒→1秒

fadeToggle

 

fadeTo
第2引数に透明度(opacity)を指定できます

構文

fadeTo(ミリ秒、透明度)
 

fadeToサンプル

下記の例は1秒かけてOpacty属性値を0.3にさせ表示させます。

引数に時間と透明度を指定できます。1000ミリ秒→1秒

fadeTo

 

まとめ

このように動的に表示させたり、非表示にしたりできる機能はJQueryには他にもやり方があります。

是非この機会にサイトやブログに付加してみてはいかがでしょうか。

以上です(^^♪