jQuery-効果

jQueryは、さまざまな種類の驚くべき効果を実行するための簡単なインターフェイスを提供します。jQueryメソッドを使用すると、最小限の構成で一般的に使用される効果をすばやく適用できます。このチュートリアルでは、視覚効果を作成するためのすべての重要なjQueryメソッドについて説明します。

要素の表示と非表示

要素を表示および非表示にするためのコマンドは、私たちが期待するものとほぼ同じです。 show() ラップされたセットの要素を表示し、 hide() それらを隠すために。

構文

の簡単な構文は次のとおりです show() 方法−

[selector].show( speed, [callback] );

これがすべてのパラメータの説明です-

speed − 3つの事前定義された速度（「低速」、「通常」、または「高速」）のいずれか、またはアニメーションを実行するミリ秒数（1000など）を表す文字列。
callback−このオプションのパラメータは、アニメーションが完了するたびに実行される関数を表します。アニメーション化された要素ごとに1回実行されます。

以下はの簡単な構文です hide() 方法−

[selector].hide( speed, [callback] );

これがすべてのパラメータの説明です-

speed − 3つの事前定義された速度（「低速」、「通常」、または「高速」）のいずれか、またはアニメーションを実行するミリ秒数（1000など）を表す文字列。
callback−このオプションのパラメータは、アニメーションが完了するたびに実行される関数を表します。アニメーション化された要素ごとに1回実行されます。

例

小さなJQueryコーディングを含む次のHTMLファイルについて考えてみます-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

これにより、次の結果が生成されます-

要素の切り替え

jQueryは、要素の表示状態を表示または非表示に切り替えるメソッドを提供します。要素が最初に表示されている場合、非表示になります。非表示の場合は表示されます。

構文

これは、次のいずれかの簡単な構文です。 toggle() メソッド-

[selector]..toggle([speed][, callback]);

これがすべてのパラメータの説明です-

speed − 3つの事前定義された速度（「低速」、「通常」、または「高速」）のいずれか、またはアニメーションを実行するミリ秒数（1000など）を表す文字列。
callback−このオプションのパラメータは、アニメーションが完了するたびに実行される関数を表します。アニメーション化された要素ごとに1回実行されます。

例

画像を含む単純な<div>など、任意の要素をアニメーション化できます-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

これにより、次の結果が生成されます-

JQueryエフェクトメソッド

jQueryエフェクトの基本的な概念を見てきました。次の表に、さまざまな種類の効果を作成するためのすべての重要な方法を示します。

シニア番号	方法と説明
1	animate（params、[duration、easing、callback]）カスタムアニメーションを作成するための関数。
2	fadeIn（速度、[コールバック]）不透明度を調整し、完了後にオプションのコールバックを起動することにより、一致するすべての要素をフェードインします。
3	fadeOut（速度、[コールバック]）不透明度を0に調整し、表示を「なし」に設定し、完了後にオプションのコールバックを起動することにより、一致するすべての要素をフェードアウトします。
4	fadeTo（速度、不透明度、コールバック）一致したすべての要素の不透明度を指定された不透明度にフェードし、完了後にオプションのコールバックを起動します。
5	hide（）一致した要素のセットが表示されている場合は、それぞれを非表示にします。
6	hide（速度、[コールバック]）優雅なアニメーションを使用し、完了後にオプションのコールバックを起動して、一致したすべての要素を非表示にします。
7	公演（）一致した要素のセットが非表示になっている場合は、それぞれを表示します。
8	show（速度、[コールバック]）優雅なアニメーションを使用し、完了後にオプションのコールバックを起動して、一致したすべての要素を表示します。
9	slideDown（速度、[コールバック]）高さを調整し、完了後にオプションのコールバックを起動して、一致したすべての要素を明らかにします。
10	slideToggle（速度、[コールバック]）高さを調整し、完了後にオプションのコールバックを起動して、一致するすべての要素の表示を切り替えます。
11	slideUp（速度、[コールバック]）高さを調整し、完了後にオプションのコールバックを起動して、一致するすべての要素を非表示にします。
12	stop（[clearQueue、gotoEnd]）指定されたすべての要素で現在実行中のすべてのアニメーションを停止します。
13	トグル（）一致した要素の各セットの表示を切り替えます。
14	トグル（速度、[コールバック]）優雅なアニメーションを使用して一致した要素の各セットの表示を切り替え、完了後にオプションのコールバックを起動します。
15	トグルスイッチ）スイッチに基づいて、一致した要素の各セットの表示を切り替えます（trueはすべての要素を表示し、falseはすべての要素を非表示にします）。
16	jQuery.fx.off すべてのアニメーションをグローバルに無効にします。

UIライブラリベースのエフェクト

これらのエフェクトを使用するには、最新のjQueryUIライブラリをダウンロードできます。 jquery-ui-1.11.4.custom.zipjQuery UIライブラリから、またはGoogle CDNを使用して、jQueryの場合と同様の方法で使用します。

HTMLページで次のコードスニペットを使用してjQueryUIにGoogleCDNを使用したため、jQueryUIを使用できます-

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

シニア番号	方法と説明
1	ブラインド要素をブラインドで取り除くか、でブラインドして表示します。
2	跳ねる、弾む要素を垂直方向または水平方向にn回バウンスします。
3	クリップ要素を垂直または水平にオンまたはオフにクリップします。
4	落とす要素をドロップするか、ドロップインして表示します。
5	爆発する要素を複数の部分に分解します。
6	折りたたむ一枚の紙のように要素を折ります。
7	ハイライト定義された色で背景を強調表示します。
8	パフスケールとフェードアウトのアニメーションは、パフ効果を作成します。
9	脈動要素の不透明度を複数回脈動させます。
10	規模要素をパーセンテージ係数で縮小または拡大します。
11	シェイク要素を垂直方向または水平方向にn回振る。
12	サイズ要素のサイズを指定された幅と高さに変更します。
13	滑り台要素をビューポートからスライドさせます。
14	転送要素のアウトラインを別の要素に転送します。

シニア番号	方法と説明
1	animate（params、[duration、easing、callback]）カスタムアニメーションを作成するための関数。
2	fadeIn（速度、[コールバック]）不透明度を調整し、完了後にオプションのコールバックを起動することにより、一致するすべての要素をフェードインします。
3	fadeOut（速度、[コールバック]）不透明度を0に調整し、表示を「なし」に設定し、完了後にオプションのコールバックを起動することにより、一致するすべての要素をフェードアウトします。
4	fadeTo（速度、不透明度、コールバック）一致したすべての要素の不透明度を指定された不透明度にフェードし、完了後にオプションのコールバックを起動します。
5	hide（）一致した要素のセットが表示されている場合は、それぞれを非表示にします。
6	hide（速度、[コールバック]）優雅なアニメーションを使用し、完了後にオプションのコールバックを起動して、一致したすべての要素を非表示にします。
7	公演（）一致した要素のセットが非表示になっている場合は、それぞれを表示します。
8	show（速度、[コールバック]）優雅なアニメーションを使用し、完了後にオプションのコールバックを起動して、一致したすべての要素を表示します。
9	slideDown（速度、[コールバック]）高さを調整し、完了後にオプションのコールバックを起動して、一致したすべての要素を明らかにします。
10	slideToggle（速度、[コールバック]）高さを調整し、完了後にオプションのコールバックを起動して、一致するすべての要素の表示を切り替えます。
11	slideUp（速度、[コールバック]）高さを調整し、完了後にオプションのコールバックを起動して、一致するすべての要素を非表示にします。
12	stop（[clearQueue、gotoEnd]）指定されたすべての要素で現在実行中のすべてのアニメーションを停止します。
13	トグル（）一致した要素の各セットの表示を切り替えます。
14	トグル（速度、[コールバック]）優雅なアニメーションを使用して一致した要素の各セットの表示を切り替え、完了後にオプションのコールバックを起動します。
15	トグルスイッチ）スイッチに基づいて、一致した要素の各セットの表示を切り替えます（trueはすべての要素を表示し、falseはすべての要素を非表示にします）。
16	jQuery.fx.off すべてのアニメーションをグローバルに無効にします。

シニア番号	方法と説明
1	ブラインド要素をブラインドで取り除くか、でブラインドして表示します。
2	跳ねる、弾む要素を垂直方向または水平方向にn回バウンスします。
3	クリップ要素を垂直または水平にオンまたはオフにクリップします。
4	落とす要素をドロップするか、ドロップインして表示します。
5	爆発する要素を複数の部分に分解します。
6	折りたたむ一枚の紙のように要素を折ります。
7	ハイライト定義された色で背景を強調表示します。
8	パフスケールとフェードアウトのアニメーションは、パフ効果を作成します。
9	脈動要素の不透明度を複数回脈動させます。
10	規模要素をパーセンテージ係数で縮小または拡大します。
11	シェイク要素を垂直方向または水平方向にn回振る。
12	サイズ要素のサイズを指定された幅と高さに変更します。
13	滑り台要素をビューポートからスライドさせます。
14	転送要素のアウトラインを別の要素に転送します。