jQueryアニメーションと特殊効果について詳しく解説-jsチュートリアル-php.cn

jQueryアニメーションと特殊効果について詳しく解説

韦小宝

リリース： 2017-11-28 09:46:38

オリジナル

1568 人が閲覧しました

jqueryで非同期以外に最も使用する必要があるのは、アニメーションと特殊効果です。ユーザーにより良いエクスペリエンスを提供したい場合は、jqueryが最良の選択です。jqueryのアニメーションを詳しく見てみましょう。特殊効果の解説！

1. Hide() と show() の表示と非表示

アニメーションの場合、表示と非表示は jQuery の最も基本的な効果の 1 つです。

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(); //显示
                });
            });
        </script>
        <input type="button" value="Hide">
        <input type="button" value="Show">
        <p>点击按钮，看看效果</p>
        <div><em>本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。</em>
        </div>

ログイン後にコピー

上記は、 Hide() 関数と show() 関数のテストです。

2. show()、hide()、toggle() メソッドを使用する

実際、これら 2 つのメソッドはパラメーター制御を受け入れることができます。表示と非表示のプロセス。
構文は次のとおりです

show(duration,[callback]);
hide(duration,[callback]);

ログイン後にコピー

このうち、durationはアニメーションの実行時間の長さを表し、slow、normal、fastなどの速度を表す文字列にすることもできます。また、時間（ミリ秒）を表す整数にすることもできます。 callback はオプションのコールバック関数です。アニメーションの完了後に実行されます。

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(300); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(500); //显示
                });
            });
        </script>

ログイン後にコピー

この例は、時間パラメーターが Hide() と show() に追加されることを除いて、最初の例と同じです。実際、toogle() はイベントパラメータを追加することもできます。

3. fadeIn() メソッドと fadeOut() メソッドを使用する

アニメーション効果に関して、jQuery には、fadeIn() と fadeOut という 2 つの実用的なメソッドも用意されています。スロー() と非表示()。

 fadeIn(duration, [callback]);
 fadeOut(duration, [callback]);

ログイン後にコピー

例

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(3000); //逐渐fadeOut
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000); //逐渐fadeIn
                });
            });
        </script>
        <img src="/uploads/allimg/150204/225Q14038-0.jpg">
        <input type="button" value="Hide">
        <input type="button" value="Show">

ログイン後にコピー

fadeTo() メソッドの使用法。

fadeTo() メソッドは、選択した要素の不透明度を指定された値に徐々に変更します。

例:

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(1000);
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000);
                });
                $("input:eq(2)").click(function() {
                    $("img").fadeTo(1000, 0.5);
                });
                $("input:eq(3)").click(function() {
                    $("img").fadeTo(1000, 0);
                });
            });
        </script>
            <p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">

ログイン後にコピー

fadeOut関連パラメータ

速度
オプション。要素が現在の透明度から指定した透明度に変化する速度を指定します。

可能な値:

ミリ秒 (例: 1500)
"slow"
"normal"
"fast"
不透明度必須。フェードインまたはフェードアウトする透明度を指定します。 0.00 ～ 1.00 の数値である必要があります。
コールバック
オプション。 fadeTo関数実行後に実行される関数。

コールバックの詳細については、jQuery コールバックの章をご覧ください。

このパラメータは速度パラメータが設定されていないと設定できません。

4. スライドの slideUp と slideDown 効果

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("div").add("img").slideUp(1000);
                });
                $("input:eq(1)").click(function() {
                    $("div").add("img").slideDown(1000);
                });
                $("input:eq(2)").click(function() {
                    $("div").add("img").hide(1000);
                });
                $("input:eq(3)").click(function() {
                    $("div").add("img").show(1000);
                });
            });
        </script>  
    <input type="button" value="SlideUp">
    <input type="button" value="SlideDown">
    <input type="button" value="Hide">
    <input type="button" value="Show"><br>
    <div></div><img src="04.jpg">

ログイン後にコピー

いくつかのアニメーション効果については前述しましたが、jQuery では、PPT で同様のスライドカーテンをシミュレートする slideUp() と slideDown() も提供されています。効果はまったく同じです。同様に、slow() と hide() です。

上記のコードは、add メソッドを使用して結合される div と img を定義します。

5. カスタムアニメーション

フレームワークの汎用性とコードファイルのサイズを考慮すると、jQuery はすべてのアニメーション効果をカバーすることはできませんが、開発者がアニメーションをカスタマイズできる animate() メソッドを提供します。このセクションでは主に、animate() メソッドの 2 つの形式とアプリケーションを紹介します。

animate() メソッドは開発者に多くのスペースを与えます。 2 つの形式があります。最初の形式がより一般的に使用されます。使用法は次のとおりです

animate(params,[duration],[easing],[callback])
ここで、params は変更する CSS プロパティのリストであり、変更する最終値です。duration はオプション、および show()/ Hide() のパラメータはまったく同じ意味を持ちます。イージングはオプションのパラメータで、通常はアニメーションプラグインによって使用されます。リズム変更プロセスを制御するために使用されます。 jQuery は、linear と slide の 2 つの値のみを提供します。callback はオプションのコールバック関数です。アニメーションの完了後に発生します。

注意が必要です。 params 内の変数は、camel の命名方法に従います。たとえば、paddingLeft を padding-left のように記述することはできません。また、params は CSS で数値で表される属性のみにすることができます。たとえば、width.top.opacity などです。

backgroundColor などの属性は、animate ではサポートされていません。

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("button").click(function() {
                    $("#block").animate({
                        opacity: "0.5",
                        width: "80%",
                        height: "100px",
                        borderWidth: "5px",
                        fontSize: "30px",
                        marginTop: "40px",
                        marginLeft: "20px"
                    }, 2000);
                });
            });
        </script>
        <button id="go">Go>></button>
        <div id="block">动画！</div>

ログイン後にコピー

jQuery は params で「+=」または「-=」を使用して相対的な変更を示すこともできます。たとえば、

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("button:first").click(function() {
                    $("#block").animate({
                        left: "-=80px" //相对左移
                    }, 300);
                });
                $("button:last").click(function() {
                    $("#block").animate({
                        left: "+=80px" //相对右移
                    }, 300);
                });
            });
        </script>
        <button >Go>></button>
        <button >Go>></button>
        <div id="block">动画！</div>

ログイン後にコピー

は最初に div を

absolutely に配置し、次に animate() で -= と += を使用して、それぞれ相対的な左と右の移動を実現します。

animate() メソッドには、以下に示すように別の形式があります:

animate(params, options)

このうち、params は最初の形式とまったく同じで、options は主に継続時間を含むアニメーションのオプションのパラメータのリストです。、 esaing 、 callback 、 queue など。duration.easing.callback は最初の形式とまったく同じです。 queue はブール値で、jQuery を形成する複数の animate() がある場合、現在の animate() が次の animate() に続いて、順番に実行するか (true)、同時に false をトリガーするか

次の例は、animate() の 2 番目の使用法を示しています。

    <style>
            div {
                background-color: #FFFF22;
                width: 100px;
                text-align: center;
                border: 2px solid #000000;
                margin: 3px;
                font-size: 13px;
                font-family: Arial, Helvetica, sans-serif;
            }
            input {
                border: 1px solid #000033;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    //第一个animate与第二个animate同时执行，然后再执行第三个
                    $("#block1").animate({
                            width: "90%"
                        }, {
                            queue: false,
                            duration: 1500
                        })
                        .animate({
                            fontSize: "24px"
                        }, 1000)
                        .animate({
                            borderRightWidth: "20px"
                        }, 1000);
                });
                $("input:eq(1)").click(function() {
                    //依次执行三个animate
                    $("#block2").animate({
                            width: "90%"
                        }, 1500)
                        .animate({
                            fontSize: "24px"
                        }, 1000)
                        .animate({
                            borderRightWidth: "20px"
                        }, 1000);
                });
                $("input:eq(2)").click(function() {
                    $("input:eq(0)").click();
                    $("input:eq(1)").click();
                });
                $("input:eq(3)").click(function() {
                    //恢复默认设置
                    $("div").css({
                        width: "",
                        fontSize: "",
                        borderWidth: ""
                    });
                });
            });
        </script>
        <input type="button" id="go1" value="Block1动画">
        <input type="button" id="go2" value="Block2动画">
        <input type="button" id="go3" value="同时动画">
        <input type="button" id="go4" value="重置">
        <div id="block1">Block1</div>
        <div id="block2">Block2</div>

ログイン後にコピー

以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行。可以通过重置反复测试，熟悉animate()第二种形式。

以上就是本文的全部内容了，希望大家能够喜欢。

相关推荐：

Jquery中each的三种遍历方法

JQuery动画animate的stop方法使用详解

JavaScript强化教程――jQuery动画

以上がjQueryアニメーションと特殊効果について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。