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（）*メソッドの1つの単純な構文を次に示します-

[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>

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