jQuery fadeInとfadeOut：フェードイン・フェードアウト
jQueryマニュアルアニメーションを利用してコンテンツを表示・非表示することができます。
クリックして表示・非表示（徐々に）
codinghaku.comへようこそ
プログラミング学習・開発Tips・技術情報
fadeIn()メソッド
fadeIn()メソッドは、指定した要素をフェードイン（徐々に表示）させます。引数にはフェードインに要する時間（ミリ秒）を指定できます。
$("#example").fadeIn(2000); // 2秒間かけてフェードインfadeOut()メソッド
fadeOut()メソッドは、指定した要素をフェードアウト（徐々に非表示）させます。引数にはフェードアウトに要する時間（ミリ秒）を指定できます。
$("#example").fadeOut(2000); // 2秒間かけてフェードアウトfadeToggle()メソッド
fadeToggle()メソッドは、指定した要素の表示状態をフェードインとフェードアウトで切り替えます。引数にはフェードの時間（ミリ秒）を指定できます。
$("#example").fadeToggle(2000); // 2秒間かけて表示状態を切り替え表示例
サンプルコード
<button>クリックして</button>
<br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>ボタンがクリックされると、赤、緑、青のdivが順にフェードイン/フェードアウトするというものです。それぞれのスピードは異なり、”div1″はデフォルトのスピード、”div2″は”slow”（遅め）、”div3″は3000ミリ秒（3秒）となっています。
fadeTo()メソッド
fadeTo()メソッドは、指定した要素の透明度を徐々に変更します。第一引数には変化に要する時間（ミリ秒）、第二引数には変化後の透明度（0〜1）を指定します。
$("#example").fadeTo(2000, 0.5); // 2秒間かけて透明度を50%に変更表示例
サンプルコード
<button>クリックして透明度を変更する</button>
<br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>このコードでは、ボタンがクリックされると、各色のdivの透明度が変更されます。赤、緑、青のdivの透明度がそれぞれ0.15、0.4、0.7に変更されます。
コメント