fadeIn()/fadeOut()は、文字通りです。
フェードイン・フェードアウトしながらHTML要素の
表示・非表示を切り替える命令です。
透明度(CSSのopacityプロパティ)の設定値を徐々に変更することで
フェード効果を再現しています。
$( セレクター ).fadeIn( スピード, コールバック関数 );
$( セレクター ).fadeOut( スピード, コールバック関数 );
実行結果はこちらです。
|
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 29 30 31 32 33 34 35 36 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:white; font-weight:100; margin:0 auto;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <button id="fadeIn">表示</button> <button id="fadeOut">非表示</button> <p><img src="img/image3.jpg" alt="桜"></p> <script> $(function(){ $("button#fadeIn").click(function(){ $("img:not(:animated)").fadeIn("slow"); }); $("button#fadeOut").click(function(){ $("img:not(:animated)").fadeOut("slow"); }); }); </script> </body> </html> |