jqueryのstop()の使用例を詳しく解説-jsチュートリアル-php.cn

jqueryのstop()の使用例を詳しく解説

巴扎黑

リリース： 2017-06-30 11:34:30

オリジナル

1962 人が閲覧しました

stop は、ページのアニメーション効果を制御するために jQuery で使用されるメソッドです。実行後すぐに、現在のページのアニメーション効果を終了します。
stop は、新しいバージョンの jQuery に 2 つのパラメーターを追加しました:
最初のパラメーターは、アニメーションシーケンスをクリアするかどうか、つまり、現在の要素のアニメーション効果を停止するか、それに関連付けられているすべてのアニメーション効果を停止するかを意味します。 false でスキップされます。現在のアニメーション効果、次のアニメーション効果を実行します。
2 番目のパラメーターは、現在のアニメーション効果を最後まで実行するかどうかです。これは、現在のアニメーションを停止するときに、アニメーション効果が実行されたばかりであることを意味します。この時点で必要な効果がアニメーションの実行後の場合、このパラメータは true です。それ以外の場合、stop が実行されるとアニメーション効果が停止します

HTML コード

<p id="animater">
            stop()方法测试
        </p>

        <p id="button">
            <input type="button" id="button1" value="stop()"/>
            <input type="button" id="button2" value="stop(true)"/>
            <input type="button" id="button3" value="stop(false,true)"/>
            <input type="button" id="button4" value="stop(true,true)"/>
            
        </p>

ログイン後にコピー

CSS コード

#animater{
                width: 150px;
                background:activeborder;
                border: 1px solid black;
                /*为了移动，需设置此属性*/
                position: relative;
            }

ログイン後にコピー

jquery コード

//            为了看效果，随意写的动画
                $(&#39;#animater&#39;).animate({
                    &#39;right&#39;:-800
                }, 3000).animate({&#39;font-size&#39;:&#39;16px&#39;},&#39;normal&#39;).animate({&#39;font-size&#39;:&#39;26px&#39;},&#39;normal&#39;).animate({&#39;font-size&#39;:&#39;36px&#39;},&#39;normal&#39;).animate({&#39;font-size&#39;:&#39;46px&#39;},&#39;normal&#39;).animate({&#39;font-size&#39;:&#39;56px&#39;},&#39;normal&#39;).animate({&#39;opacity&#39;:0},&#39;normal&#39;).animate({&#39;opacity&#39;:1},&#39;normal&#39;).animate({&#39;left&#39;:200,&#39;font-size&#39;:&#39;16px&#39;},&#39;normal&#39;);



        
                //           点击不同的button执行不同的操作
        
                $(&#39;#button1&#39;).click(function(){
                    //默认参数是false，不管写一个false还是两个false还是没写false效果一样
                    $(&#39;#animater&#39;).stop();
                });
                $(&#39;#button2&#39;).click(function(){
                    //第二个参数默认false
                    $(&#39;#animater&#39;).stop(true);
                });
                $(&#39;#button3&#39;).click(function(){
                    $(&#39;#animater&#39;).stop(false,true);
                });
                $(&#39;#button4&#39;).click(function(){
                    $(&#39;#animater&#39;).stop(true,true);
                });

ログイン後にコピー

以上がjqueryのstop()の使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。