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[デモを試してください]
