jQuery fadeIn()、fadeOut()、fadeTo()の例
jQueryには、フェーディング効果を簡単に作成する3つの便利な方法があります。
-
fadeIn() – フェードインした要素を表示します.
-
fadeOut() – フェードアウト/透明で一致する要素を非表示にする
効果。
-
fadeTo() – 一致した要素を特定の不透明度にフェードインします.
上記の3つの方法のうち、パラメータとしてのサポート期間は、遅い、速い、または正確なミリ秒です。このパラメーターを省略すると、デフォルトの400ミリ秒が適用されます。
自分で試してみてください
<html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> .fadeOutbox, .fadeInbox, .fadeTobox{ float:left; padding:8px; margin:16px; border:1px solid red; width:200px; height:50px; background-color:#000000; color:white; } .clear{ clear:both; } </style> </head> <body> <h1>jQuery fadeIn(), fadeOut() and fadeTo() example</h1> <div class="clear"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-2836379775501347" data-ad-slot="6894224149"></ins> <script> (adsbygoogle = window.adsbygoogle ||[]).push({}); </script><h2>fadeOut() example</h2> <div class="fadeOutbox"> Click me - fadeOut() </div> <div class="fadeOutbox"> Click me - fadeOut() </div> </div> <div class="clear"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2836379775501347" data-ad-slot="8821506761" data-ad-format="auto" data-ad-region="mkyongregion"></ins> <script> (adsbygoogle = window.adsbygoogle ||[]).push({}); </script><h2>fadeIn() example</h2> <div class="fadeInbox"> Click me - fadeIn() </div> <div class="fadeInbox"> Click me - fadeIn() </div> </div> <div class="clear"> <h2>fadeTo() example</h2> <div class="fadeTobox"> Click me - fadeTo() </div> <div class="fadeTobox"> Click me - fadeTo() </div> </div> <div class="clear"> <button id=reset>Reset</button> </div> <script type="text/javascript"> $(".fadeOutbox").click(function () { $(this).fadeOut('slow'); }); $(".fadeInbox").click(function () { $(this).hide().fadeIn(2000); }); $(".fadeTobox").click(function () { $(this).fadeTo('fast',0.2); }); $("#reset").click(function(){ location.reload(); }); </script> </body> </html>
リンク://wp-content/uploads/jQuery/jQuery-fadeIn-faceOut-fadeTo-example.html[デモを試してください]