jQuery stop() メソッドを理解する

この記事の目的: stop() の使用法を理解するために、例を挙げて直感的に見てみましょう。とてもシンプルで実用的ですので、必要な方は参考にしてください

フロントエンド開発者として、JS と JQuery は私たちがよく使用する開発言語とツール ライブラリです。 jQuery には非常に強力なメソッド stop() があることは誰もが知っています。これは、連続的なアニメーションやイベントでの繰り返しの蓄積を防ぐメソッドです。では、stop() を使用するにはどうすればよいでしょうか?まず stop() について紹介しましょう:

stop() の構文には 2 つのパラメーターがあり、どちらもブール値です。これらはすべてオプションですが、次のような規制もあります:

$(selector).stop(stopAll,goToEnd)

パラメータ: (デフォルトでは、パラメータが書かれていない場合、両方のパラメータは false とみなされます。)

stopAll: オプション。選択した要素のキューにあるすべてのアニメーションを停止するかどうかを指定します。これは、パラメーター値が true の場合、後続のすべてのアニメーションまたはイベントが停止されることを意味します。パラメータ値が false の場合、選択した要素によって現在実行されているアニメーションのみが停止され、後続のアニメーションには影響しません。したがって、このパラメータは通常 false です。

goToEnd: オプション。現在のアニメーションの完了を許可するかどうかを指定します。このパラメーターは、stopAll パラメーターが設定されている場合にのみ使用できます。上で述べたように、通常は stopAll パラメータの fasle 値を書き込みます。デフォルト値ではなく、実際のパラメータです。 goToEnd パラメータには 2 つのオプションがあり、1 つは false で、もう 1 つは true です。誰もがその意味を理解する必要があります。一般的には真実です。これは、現在のアニメーションを完了できるようにすることを意味します。

対応するコードは次のとおりです:

HTML:

コードをコピーします コードは次のとおりです:

)"> 抽選を開始する

/page_b.png "> レベル 30 レベル 45
レベル 55

賞品記録

CSS:

コードは次のとおりです:

#content{/*
margin-top

:10em;*/ width:48em;}

#content p{表示:ブロック;幅:100%;}

#content p.cont_b{位置:相対;

テキスト整列:センター;背景
:url(../images/content_bgb.jpg)
背景サイズ:100% 100%;}#content p img{ 表示:ブロック; 幅:100%; }#コンテンツ p .slide_box{ 位置:絶対上:0px; %; }#コンテンツ p .start{ 位置:絶対; トップ:290px;}#コンテンツ p .start_btn{ 表示:ブロック; 高さ:150ピクセル; 9999px; margin:0 auto;}/*変更*/#content p .img a.rank_30{ 位置:絶対; 左:70px; 幅:250px; :-9999px;}
#content p .img a.rank_45{ 位置:絶対; 左:460px; テキストインデント:-9999px; p .img a.rank_55{ 位置: 絶対; 左: 170px; 幅: 280px; }
#content p .img a.prize_notes :absolute; 上:470px; 表示:ブロック; 幅:150px; テキストインデント:- 9999px;

JS_jQuery:

var page =$(".slide_box .img");
var page_num = page.length;
var num = 0;
$(".next_btn").click(function(e){
if(num < 2){
page.slideUp().stop(false,true).eq(num+1).slideDown();
num++;
}else{
page.slideUp().stop(false,true).eq (0).slideDown();
num = 0;
}
});
});

上記は、JS 部分でクリック イベント エフェクトを作成するときに発生するイベントの蓄積です。 stop() メソッドに移動し、パラメータを削除または変更して試してみます。

以上がjQuery stop() メソッドを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。