jQueryの効果 - フェードインとフェードアウト

この方法jQueryのフェージング

jQueryのことで、あなたはフェードアウト効果素子をフェードインすることができます。

jQueryのフェードは、次の4つのメソッドがあります。

  • フェードイン()
  • フェードアウト()
  • fadeToggle()
  • fadeTo()

jQueryのフェードイン()メソッド

jQueryのフェードイン()は、隠し要素をフェードインするために使用されます。

構文:

$(セレクタ).fadeIn(速度、コールバック)。

オプションの速度パラメータは、効果の持続時間を指定します。これは、以下の値を取ることができます:「速い」、「遅い」またはミリ秒。

任意のコールバックパラメータは、フェージングが終了した後に実行される機能の名前です。

コード:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<スクリプトSRC = "/ jqueryの/ jqueryの-1.11.1.min.js"> </ SCRIPT>
<SCRIPT>
$(ドキュメント).ready(関数(){
$( "ボタン"()関数(){をクリックします。
$( "#のDIV1")をフェードイン();。
。$( "#1 DIV2")フェードイン( "遅い");
$( "#のDIV3")フェードイン(3000)。 ;
});
});
</スクリプト>
</ head>の

<身体>
<P>演示带有不同参数的フェードイン()方法。</ P>
<ボタン>点击这里、使三个矩形淡入</ button>の
<BR> <BR>
の<divのid = "DIV1"スタイル= "幅:80px;高さ:80px;表示:なし;背景色:赤;"> </ div>
<BR>
<DIV ID = "DIV2"スタイル= "幅:80px;高さ:80px;表示:なし;背景色:緑; "> </ div>
<BR>
<DIV ID =" DIV3"スタイル= "幅:80px;高さ:80px;表示:なし;背景色:青;"> </ div>
</ BODY>
</ HTML>

 

jQueryのフェードアウト()メソッド

jQueryのフェードアウト()メソッドは、可視要素をフェードします。

構文:

$(セレクタ).fadeOut(速度、コールバック)。

オプションの速度パラメータは、効果の持続時間を指定します。これは、以下の値を取ることができます:「速い」、「遅い」またはミリ秒。

任意のコールバックパラメータは、フェージングが終了した後に実行される機能の名前です。

コード:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<スクリプトSRC = "/ jqueryの/ jqueryの-1.11.1.min.js"> </ SCRIPT>
ます。<script type = "text / javascriptの">
$(ドキュメント).ready (関数(){
$( "ボタン")をクリックします(関数(){。
$( "#のDIV1")フェードアウト();
$( "#1 DIV2")フェードアウトは( "遅い");
$( "#のDIV3 「).fadeOut(3000);
});
});
</スクリプト>
</ head>の

<BODY>
<P>異なるパラメータ()メソッドを使用してフェードアウトプレゼンテーション。</ P>
<ボタン> 3つの矩形フェード</ボタン>こちらをクリックして
<BR> <BR>
<DIV ID = "DIV1"スタイル= "幅:80px;高さ:80px;背景色:赤;" > </ div>の
<BR>
<DIV ID = "DIV2"スタイル= "幅:80px;高さ:80px;背景色:緑;"> </ div>の
<BR>
<DIV ID = "DIV3"スタイル= "幅:80px;高さ:80px;背景色:青;"> </ div>
</ BODY>

</ HTML>

 

jQueryのfadeToggle()メソッド

jQueryのfadeToggle()メソッドは、フェードイン()。フェードアウト及び()メソッドとの間で切り替えることができます。

要素が残っている場合、fadeToggle()は、要素にフェード効果を追加します。

要素がフェードされる場合、fadeToggle()は、要素にフェードを追加します。

構文:

$(セレクタ).fadeToggle(速度、コールバック)。

オプションの速度パラメータは、効果の持続時間を指定します。これは、以下の値を取ることができます:「速い」、「遅い」またはミリ秒。

任意のコールバックパラメータは、フェージングが終了した後に実行される機能の名前です。

PS:コードは、直接、自己修正のjQueryの導入を可能なコピー

コード:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<スクリプトSRC = "/ jqueryの/ jqueryの-1.11.1.min.js"> </ SCRIPT>
<SCRIPT>
$(ドキュメント).ready(関数(){
$( "ボタン"()関数(){をクリックします。
$( "#のDIV1を")fadeToggle();。
。$( "#1 DIV2")fadeToggle( "遅い");
$( "#のDIV3")fadeToggle(3000)。 ;
});
});
</スクリプト>
</ head>の

<身体>

<P>異なるパラメータ()メソッドとfadeToggleプレゼンテーション。</ P>
<ボタン> 3つの矩形フェードするには、ここをクリックし、</ button>の
<BR> <BR>
<DIV ID = "DIV1"スタイル=「幅:80px;高さ:80px;背景色:赤; "> </ div>の
<BR>
<DIV ID =" DIV2 "スタイル="幅:80px;高さ:80px;背景色:緑; "> </ div>の
<BR>
<DIV ID =" DIV3「スタイル= "幅:80px;高さ:80px;背景色:青;"> </ div>
</ BODY>

</ BODY>
</ HTML>

 

jQueryのfadeTo()メソッド

jQueryのfadeTo()メソッドは、指定された不透明度(0と1の間の値)のための勾配を可能にします。

構文:

$(セレクタ).fadeTo(速度、不透明度、コールバック)。

長さを所定の場合、速度パラメータが効果を必要としました。これは、以下の値を取ることができます:「速い」、「遅い」またはミリ秒。

フェード効果の不透明度パラメータが所定の不透明度(0と1の間の値)に設定されているにfadeTo()メソッドが必要となります。

オプションのコールバックパラメータは、実行が完了した後に、関数の関数名です。

コード:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<スクリプトSRC = "/ jqueryの/ jqueryの-1.11.1.min.js"> </ SCRIPT>
<SCRIPT>
$(ドキュメント).ready(関数(){
$( "ボタン")(関数(){をクリックします。
$( "#のDIV1")をfadeTo(0.15 "遅い");
$( "#1 DIV2")fadeTo(0.4 "遅い");
$( "#1 DIV3 ").fadeTo(")、「0.7を遅らせます;
});
});
</スクリプト>
</ head>の

<身体>

<P>異なるパラメータ()メソッドとfadeToプレゼンテーション。</ P>
<ボタン> 3つの矩形フェード</ボタン>こちらをクリックして
<BR> <BR>
<DIV ID = "DIV1"スタイル= "幅:80px;高さ:80px;背景色:赤;" > </ div>の
<BR>
<DIV ID = "DIV2"スタイル= "幅:80px;高さ:80px;背景色:緑;"> </ div>の
<BR>
<DIV ID = "DIV3"スタイル= "幅:80px;高さ:80px ;背景色:青;"> </ div>

</ BODY>
</ HTML>

 

おすすめ

転載: www.cnblogs.com/huchong-bk/p/11362577.html