jQuery により、要素のフェードイン、フェードアウトが可能になります。
パネルをクリックしてフェードイン/アウトしてください
時は金なりです。迅速かつ簡便な学習をお届けします。
W3Schools では、理解しやすく・使いやすい形式で、必要なすべてを学ぶことができます。
jQuery fadeIn()
jQuery fadeIn() メソッドのデモ。
jQuery fadeOut()
jQuery fadeOut() メソッドのデモ。
jQuery
fadeToggle()
jQuery fadeToggle() メソッドのデモ。
jQuery fadeTo()
jQuery fadeTo() メソッドのデモ。
jQuery により、要素のフェードイン、フェードアウトが可能になります。
jQuery には、次のフェード・メソッドがあります:
jQuery fadeIn() メソッドは、非表示要素をフェードインするために使用します。
構文：
$(selector).fadeIn(speed,callback);
オプションの speed パラメータは、エフェクトの動作時間を指定します。それは次の値を取ることができます："slow"、"fast"、ミリ秒。
オプションの callback パラメータは、フェードの完了後に実行される関数です。
次の例は、いろいろなパラメータを持った fadeIn() メソッドのデモです：
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Try it Yourself »
jQuery fadeOut() メソッドは、表示要素をフェードアウトするために使用します。
構文:
$(selector).fadeOut(speed,callback);
オプションの speed パラメータは、エフェクトの動作時間を指定します。それは次の値を取ることができます："slow"、"fast"、ミリ秒。
オプションの callback パラメータは、フェードの完了後に実行される関数です。
次の例は、いろいろなパラメータを持った fadeOut() メソッドのデモです：
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Try it Yourself »
jQuery fadeToggle() メソッドは、fadeIn() と fadeOut() メソッドの間をトグルします。
要素がフェードアウトされていれば、fadeToggle() はそれをフェードインします。
要素がフェードインされていれば、fadeToggle() はそれをフェードアウトします。
構文:
$(selector).fadeToggle(speed,callback);
オプションの speed パラメータは、エフェクトの動作時間を指定します。それは次の値を取ることができます："slow"、"fast"、ミリ秒。
オプションの callback パラメータは、フェードの完了後に実行される関数です。
次の例は、いろいろなパラメータを持った fadeToggle() メソッドのデモです：
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
Try it Yourself »
jQuery fadeTo() メソッドは、指定した不透明度（0 ～ 1 の間の値）にフェードすることができます。
構文:
$(selector).fadeTo(speed,opacity,callback);
必須の speed パラメータは、エフェクトの動作時間を指定します。それは次の値を取ることができます："slow"、"fast"、ミリ秒。
fadeTo() メソッドの必須な opacity パラメータは、指定の不透明度（0 ～ 1 の間の値）にフェードすることを指定します。
オプションの callback パラメータは、フェードの完了後に実行される関数です。
次の例は、いろいろなパラメータを持った fadeTo() メソッドのデモです：
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
Try it Yourself »
練習問題 1 » 練習問題 2 » 練習問題 3 » 練習問題 4 » 練習問題 5 »
全 jQuery エフェクトの完全な概要については、jQuery エフェクト・リファレンスをご覧ください。