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

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 コード

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



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

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