グッズ

JQuery、JQuery で動的効果を実装するにはどうすればよいですか

JQuery を使用すると、HTML ページの要素を操作して、動的な効果、アニメーション、およびフェードを作成できます。

この記事では、さまざまな JQuery メソッドを使用してアニメーションを生成する方法について説明します。

コンテンツ

HTML 要素の非表示と表示

メソッド `hide`（）と `show`()

hide() メソッドは、スタイルをインラインで設定するだけです display: none 選択したアイテムの。逆に、show() メソッドは表示プロパティを復元します。

例を見てみましょう：

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

最初のケースでは、ボタン (hide-btn)、XNUMX 番目のケースでは、ボタン (show-btn).

また、duration パラメーターを指定して、表示と非表示の効果を一定期間アニメートすることもできます。

期間は、pre 文字列の XNUMX つを使用して指定できます。defiナイト 'slow' o 'fast'、またはミリ秒単位で、精度を高めます。値が大きいほど、アニメーションが遅くなります。

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

文字列predefiニタ 'fast' は 200 ミリ秒の期間を示し、文字列は 'slow' 600 ミリ秒の期間を示します。

の関数を指定できます callback メソッドの完了後に実行される show() またはdell ' hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

トグル方式

jQuery メソッド toggle() アイテムが最初に表示されている場合は非表示になるような方法でアイテムを表示または非表示にします。逆に、非表示の場合は表示されます (実質的に可視性を切り替えます)。

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

同様に、パラメータを指定できます duration メソッドの toggle()、メソッドのように、表示と非表示の間の遷移をアニメーション化するような方法で show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

同様に、次の関数も指定できます。 callback メソッドの toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

jQuery フェード効果

メソッド `fadeIn()` e `fadeOut()`

jQueryメソッドを使用できます fadeIn()e fadeOut() HTML 要素を表示または非表示にし、不透明度を徐々に増加または減少させ、フェード効果を作成します。

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

他の jQuery エフェクトメソッドと同様に、オプションでメソッドの期間または速度パラメーターを指定できます。 fadeIn()e fadeOut()、フェードの長さを制御するために。期間は、pre 文字列の XNUMX つを使用して指定できます。defiナイト 'slow' o 'fast'、またはミリ秒単位で。値が大きいほど、アニメーションが遅くなります。

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

メソッドの効果 fadeIn() / fadeOut() それは show() / hide()、しかしメソッドとは異なり show() / hide()、前者はターゲット要素の不透明度のみをアニメートし、サイズはアニメートしません。

の関数を指定することもできます callback メソッドの完了後に実行する fadeIn() / fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

方法 `fadeToggle()`

jQuery メソッド fadeToggle() 要素が最初に表示された場合にフェードアウトするように、不透明度をアニメーション化することにより、選択した要素を表示または非表示にします。非表示の場合は、フェードアウトします (つまり、フェード効果を切り替えます)。

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

メソッドの有効期間パラメーターを指定することもできます fadeToggle() メソッドに関しては fadeIn() / fadeOut()、フェードアニメーションの持続時間または速度を制御します。

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

fadeToggle() メソッドには、関数を指定する機能もあります callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

方法 `fadeTo()`

jQuery メソッド fadeTo() それは方法に似ています fadeIn()、しかし方法とは異なります fadeIn()、メソッド fadeTo() 要素を特定のレベルの不透明度までブレンドできます。

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

必須パラメータ opacity ターゲット要素の最終的な不透明度を 0 ～ 1 の数値で指定します。パラメータ duration o speed アニメーションのフェードの持続時間を指定するこのメソッドにも必要です。

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

エフェッティディスコリメント

メソッド `slideUp()` e `slideDown()`

jQuery メソッド slideUp() e slideDown() 高さを徐々に増減する (つまり、上下にスクロールする) ことにより、HTML 要素を非表示または表示するために使用されます。

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

他の jQuery 効果メソッドと同様に、オプションでメソッドの期間または速度パラメーターを指定できます。 slideUp() e slideDown() スライドアニメーションの長さを制御します。期間は、pre 文字列の XNUMX つを使用して指定できます。defiナイト 'slow' o 'fast'、またはミリ秒単位で。値が大きいほど、アニメーションが遅くなります。

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

メソッドの完了後に実行するコールバック関数を指定することもできます slideUp() o slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

方法 `slideToggle()`

jQuery メソッド slideToggle() 要素の高さをアニメーション化して選択した要素を表示または非表示にし、要素が最初に表示された場合に上にスクロールします。非表示の場合、下にスクロールします。つまり、メソッドを切り替えます slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

同様に、メソッドの有効期間パラメーターを指定できます slideToggle() 来ます slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

同様に、メソッドのコールバック関数を指定することもできます slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

アニメーション効果

方法 `animate()`

jQuery メソッド animate() カスタムアニメーションの作成に使用されます。方法 animate() などの数値 CSS プロパティをアニメーション化するために使用されます。 width, height, margin, padding, opacity, top, left 等しかし、次のような非数値プロパティ color o background-color 基本的な jQuery 機能を使用してアニメーション化することはできません。

メソッドの基本構文 animate() それは次のとおりです。

$(selector).animate({ properties }, duration, callback);

メソッドのパラメーター animate() 次の意味があります。

必須のプロパティパラメータ defiアニメーション化する CSS プロパティを終了します。
オプションのdurationパラメータは、アニメーションを実行する時間を指定します。期間は、pre 文字列の XNUMX つを使用して指定できます。defiナイト 'slow' o 'fast'、またはミリ秒単位で。値が大きいほど、アニメーションが遅くなります。
オプションの callback パラメータは、アニメーションの完了後に呼び出す関数です。

以下は、メソッドの簡単な例です animate() ボタンをクリックすると、画像が元の位置から右に 300 ピクセルアニメーション化されます。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

メソッドを使用して、要素の複数のプロパティを一度に一緒にアニメーション化することもできます animate(). すべてのプロパティが遅延なく同時にアニメーション化されました。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

jQuery の連結関数を使用して、要素の複数のプロパティを XNUMX つずつ個別にアニメーション化することもできます。

次の例は、要素の前のアニメーションが完了すると、各アニメーションが開始される、キューまたはチェーンされた jQuery アニメーションを示しています。連結関数については、今後の記事で説明します。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

また可能です defiアニメーション化されたプロパティの相対値。接頭辞付きで値を指定した場合 += o -=、ターゲット値は、プロパティの現在の値から指定された数を加算または減算することによって計算されます。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

数値に加えて、各プロパティは文字列を受け入れることができます 'show', 'hide' e 'toggle'. プロパティを現在の値から初期値に、またはその逆にアニメーション化するだけの場合に非常に便利です。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

方法 `stop()`

jQuery メソッド stop() 現在実行中の jQuery アニメーションまたは選択した要素に対する効果を完了する前に停止するために使用されます。

メソッドの基本構文 stop() jQuery は次のように指定できます。

$(selector).stop(stopAll, goToEnd);

上記の構文のパラメーターには、次の意味があります。

Il オプションのパラメータ boolean stopAll、キューに入れられたアニメーションを削除するかどうかを指定します。プレdefiナイトは false、これは、現在のアニメーションのみが停止され、キュー内の残りのアニメーションが後で実行されることを意味します。
ブール値パラメーター goToEnd オプションで、現在のアニメーションをすぐに完了するかどうかを指定します。プレdefiナイトは false.

メソッドを示す簡単な例を次に示します。 stop() ボタンのクリックでアニメーションを開始および停止できる実際のアクション。

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

このメソッドの別の例を次に示します。ボタンをもう一度クリックするとSlide Toggle」アニメーションの開始後、終了する前に、アニメーションは保存された開始点から反対方向にすぐに開始されます。

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

アニメーション化されたホバー効果を作成するときに発生する可能性がある最も一般的な問題の XNUMX つは、マウスカーソルをすばやく配置および削除するときに、複数のアニメーションがキューに入ることです。なぜ、この状況で、 mouseenter GLI mouseleave アニメーションが完了する前に、イベントがすばやく発生します。この問題を回避し、素敵でスムーズなホバー効果を作成するには、追加できます stop(true, true)メソッドチェーンに、次のように:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

コールバック

JavaScript ステートメントは XNUMX 行ずつ実行されます。ただし、jQuery エフェクトが完了するまでに時間がかかるため、前のエフェクトがまだ実行されている間に次の行のコードが実行される可能性があります。これを防ぐために、jQuery は各エフェクトメソッドにコールバック関数を提供します。

コールバック関数は、エフェクトが完了すると実行される関数です。コールバック関数は引数としてエフェクトのメソッドに渡され、通常は最後のメソッド引数として表示されます。たとえば、jQuery エフェクトメソッドの基本構文 slideToggle() 次のように指定できるコールバック関数を使用します。

$(selector).slideToggle(duration, callback);

ステートメントを配置した次の例を考えてみましょう slideToggle()e alert()隣同士。このコードを試すと、スライドのトグル効果が完了するのを待たずに、トグルボタンをクリックした直後にアラートが表示されます。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

これは、ステートメントを挿入した前の例の修正版です。 alert() メソッドのコールバック関数内 slideToggle(). このコードを試すと、スライドトグル効果が完了すると、警告メッセージが表示されます。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

同様に、次のことができます。 defi他の jQuery エフェクトメソッドの終了コールバック関数。 show(), hide(), fadeIn(), fadeOut(), animate()など。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

上記のサンプルコードを試すと、アイテムごとに XNUMX 回、同じ警告メッセージが XNUMX 回表示されます。 <h1> e <p>、アクティブ化ボタンをクリックした後。

BlogInnovazione.it

タグ： jQueryの

28年2023月10日午後58時XNUMX分

後に Laravel: Laravel ビューとは »

Precedente « Verimatrix Secure Delivery プラットフォームは、数十億のビデオ視聴者ライセンスを提供して初年度を終える

子供のためのぬり絵の利点 - すべての年齢層のための魔法の世界

ぬり絵を通じて細かい運動能力を発達させることで、子供たちは書くなどのより複雑なスキルを習得できるようになります。色…

2月2024

グッズ

未来はここにあります: 海運業界が世界経済をどのように変革しているか

海軍部門は真の世界経済大国であり、150 億市場に向けて舵を切り続けています...

1月2024

グッズ

パブリッシャーと OpenAI が人工知能によって処理される情報の流れを規制する契約に署名

先週の月曜日、フィナンシャル・タイムズ紙はOpenAIとの契約を発表した。 FT は世界クラスのジャーナリズムにライセンスを供与しています…

4月30 2024

グッズ

オンライン支払い: ストリーミングサービスで永久に支払いができる仕組みをご紹介します

何百万人もの人々がストリーミングサービスに月額料金を払っています。あなたは…というのが一般的な意見です。

4月29 2024

JQuery、JQuery で動的効果を実装するにはどうすればよいですか

JQuery を使用すると、HTML ページの要素を操作して、動的な効果、アニメーション、およびフェードを作成できます。

HTML 要素の非表示と表示

メソッド `hide`（）と `show`()

トグル方式

jQuery フェード効果

メソッド `fadeIn()` e `fadeOut()`

方法 `fadeToggle()`

方法 `fadeTo()`

エフェッティディスコリメント

メソッド `slideUp()` e `slideDown()`

方法 `slideToggle()`

アニメーション効果

方法 `animate()`

方法 `stop()`

コールバック

最近の記事

子供のためのぬり絵の利点 - すべての年齢層のための魔法の世界

未来はここにあります: 海運業界が世界経済をどのように変革しているか

パブリッシャーと OpenAI が人工知能によって処理される情報の流れを規制する契約に署名

オンライン支払い: ストリーミングサービスで永久に支払いができる仕組みをご紹介します

最近の記事

タグ

JQuery、JQuery で動的効果を実装するにはどうすればよいですか

JQuery を使用すると、HTML ページの要素を操作して、動的な効果、アニメーション、およびフェードを作成できます。

HTML 要素の非表示と表示

メソッド hide（） と show()

トグル方式

jQuery フェード効果

メソッド fadeIn() e fadeOut()

方法 fadeToggle()

方法 fadeTo()

エフェッティ ディ スコリメント

メソッド slideUp() e slideDown()

方法 slideToggle()

アニメーション効果

方法 animate()

方法 stop()

コー​​ルバック

最近の記事

子供のためのぬり絵の利点 - すべての年齢層のための魔法の世界

未来はここにあります: 海運業界が世界経済をどのように変革しているか

パブリッシャーと OpenAI が人工知能によって処理される情報の流れを規制する契約に署名

オンライン支払い: ストリーミング サービスで永久に支払いができる仕組みをご紹介します

最近の記事

タグ

メソッド `hide`（）と `show`()

メソッド `fadeIn()` e `fadeOut()`

方法 `fadeToggle()`

方法 `fadeTo()`

エフェッティディスコリメント

メソッド `slideUp()` e `slideDown()`

方法 `slideToggle()`

方法 `animate()`

方法 `stop()`

コールバック

オンライン支払い: ストリーミングサービスで永久に支払いができる仕組みをご紹介します