jQuery stop() を理解する

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

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

$(セレクター).stop(stopAll,goToEnd)

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

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

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

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

HTML:

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

抽選を開始

レベル 30 レベル 45 レベル 55

賞品記録

CSS:




コードをコピーします

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

#content{/* margin-top:10em;*/ width:48em; } #コンテンツ div{ 表示:ブロック幅:100%;} #content div.cont_b{position:relative; text-align:center;background:url(../images/content_bgb.jpg) no-repeat; } #content div img{ 表示: ブロック: なし; } #コンテンツ div .slide_box{ 位置:絶対; 幅:100%; #content div .img .start{ 位置:絶対; トップ:290px;}

#content div .img a.start_btn{ 表示: ブロック; 幅: 150 ピクセル; テキスト インデント: -9999 ピクセル; }/*変更*/

#コンテンツ div .img a.rank_30{ 位置: 絶対; 左: 70 ピクセル; 幅: 250 ピクセル; }
#コンテンツ div .img a.rank_45{ 位置: 絶対; 左: 460 ピクセル; 幅: 250 ピクセル; }
#コンテンツ div .img a.rank_55{ 位置: 絶対; 左: 170 ピクセル; 幅: 280 ピクセル; }
#コンテンツ div .img a.prize_notes{ 位置: 絶対; 右: 50 ピクセル; 幅: 150 ピクセル; }




JS_jQuery:

コードをコピー

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

var page =$(".slide_box .img");
var page_num = page.length;
var num = 0;
$(".next_btn").click(function(e){
If(num page.slideUp().stop(false,true).eq(num 1).slideDown();
番号 ;
}その他{
page.slideUp().stop(false,true).eq(0).slideDown();
数値 = 0;
}
});
});

上記は、JS 部分でクリック イベント エフェクトを作成するときに発生したイベントの蓄積です。パラメータを削除または変更して試してみてください。皆さんのお役に立てれば幸いです。ガガ