今回はフェードについて解説していきたいと思います。
フェードは薄っすらと消えていったり、表示したりする機能でそれをOpacity(透明度)によって動作させています。
それではいってみましょう(*゚▽゚)ノ
Menu
fadeOutさせながら隠す
構文
fadeOut(ミリ秒)
fadeOutサンプル
下記の例は1秒かけてOpacty属性でfadeOutさせ、最後はdisplay属性がnoneになり非表示になります。
引数に時間を指定できます。1000ミリ秒→1秒
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <title>fadeOut</title> <style> .sample{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <script> $(function() { $('button').click(function() { $('.sample').fadeOut(1000); //fadeToggleさせる }); }); </script> <div class="sample"></div> <button>fadeOut</button> </body> </html> |
fadeInしながら表示させる
構文
fadeIn(ミリ秒)
fadeInサンプル
下記の例は1秒かけてOpacty属性でfadeInさせます。
引数に時間を指定できます。1000ミリ秒→1秒
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <title>fadeIn</title> <style> .sample{ height: 100px; width: 100px; background-color: red; display: none; } </style> </head> <body> <script> $(function() { $('button').click(function() { $('.sample').fadeIn(1000); //fadeOutさせる }); }); </script> <div class="sample"></div> <button>fadeIn</button> </body> </html> |
fadeToggle
表示してたらfadeOutで隠し、隠れたらfadeInで表示
構文
fadeToggle(ミリ秒)
fadeToggleサンプル
下記の例は1秒かけてOpacty属性でfadeToggleさせます。
引数に時間を指定できます。1000ミリ秒→1秒
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <title>fadeToggle</title> <style> .sample{ height: 100px; width: 100px; background-color: red; display: none; } </style> </head> <body> <script> $(function() { $('button').click(function() { $('.sample').fadeToggle(1000); //fadeToggleさせる }); }); </script> <div class="sample"></div> <button>fadeToggle</button> </body> </html> |
fadeTo
第2引数に透明度(opacity)を指定できます
構文
fadeTo(ミリ秒、透明度)
fadeToサンプル
下記の例は1秒かけてOpacty属性値を0.3にさせ表示させます。
引数に時間と透明度を指定できます。1000ミリ秒→1秒
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <title>fadeTo</title> <style> .sample{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <script> $(function() { $('button').click(function() { $('.sample').fadeTo(1000,0.3); //fadeToさせる }); }); </script> <div class="sample"></div> <button>fadeTo</button> </body> </html> |
まとめ
このように動的に表示させたり、非表示にしたりできる機能はJQueryには他にもやり方があります。
是非この機会にサイトやブログに付加してみてはいかがでしょうか。
以上です(^^♪