query詳細に精通するまで簡単に入門-(六)Jquery効果の「フェードインとフェードアウト」

jQuery効果-フェードアウト
jQueryでは、要素のフェードアウト効果を実現できます.
 
 
≪インスタンス｜Instance｜emdw≫
jQuery fadeIn()
jQuery fadeIn()メソッドを実証します.
jQuery fadeOut()
jQuery fadeOut()メソッドを実証します.
jQuery fadeToggle()
jQuery fadeToggle()メソッドを実証します.
jQuery fadeTo()
jQuery fadeTo()メソッドを実証します.
jQuery fadeIn()メソッド
jQuery fadeIn()は、非表示の要素をフェードするために使用されます.
構文:

$(selector).fadeIn(speed,callback);

オプションのspeedパラメータは、効果の時間を規定します.「slow」、「fast」、またはミリ秒の値を指定できます.
オプションのcallbackパラメータはfadingが完了した後に実行される関数名です.
次の例では、異なるパラメータを持つfadeIn()メソッドを示します.
≪インスタンス｜Instance｜emdw≫

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

みずからやってみる
jQuery fadeOut()メソッド
jQuery fadeOut()メソッドは、可視要素をフェードアウトするために使用されます.
構文:

$(selector).fadeOut(speed,callback);

オプションのspeedパラメータは、効果の時間を規定します.「slow」、「fast」、またはミリ秒の値を指定できます.
オプションのcallbackパラメータはfadingが完了した後に実行される関数名です.
次の例では、異なるパラメータを持つfadeOut()メソッドを示します.
≪インスタンス｜Instance｜emdw≫

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

みずからやってみる
jQuery fadeToggle()メソッド
jQuery fadeToggle()メソッドはfadeIn()メソッドとfadeOut()メソッドの間で切り替えることができる.
エレメントがフェードアウトされている場合、fadeToggle()はエレメントにフェードイン効果を追加します.
エレメントがフェードアウトされている場合、fadeToggle()はエレメントにフェードアウト効果を追加します.
構文:

$(selector).fadeToggle(speed,callback);

オプションのspeedパラメータは、効果の時間を規定します.「slow」、「fast」、またはミリ秒の値を指定できます.
オプションのcallbackパラメータはfadingが完了した後に実行される関数名です.
次の例では、異なるパラメータを持つfadeToggle()メソッドを示します.
≪インスタンス｜Instance｜emdw≫

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

みずからやってみる
jQuery fadeTo()メソッド
jQuery fadeTo()メソッドでは、指定された不透明度(0～1の値)にグラデーションを設定できます.
構文:

$(selector).fadeTo(speed,opacity,callback);

必要なspeedパラメータは、効果の時間を規定します.「slow」、「fast」、またはミリ秒の値を指定できます.
fadeTo()メソッドで必要なopacityパラメータは、フェードアウト効果を所定の不透明度(0～1の値)に設定します.
オプションのcallbackパラメータは、関数が完了した後に実行される関数名です.
次の例では、異なるパラメータを持つfadeTo()メソッドを示します.
≪インスタンス｜Instance｜emdw≫

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

みずからやってみる