JavaScriptのstopメソッドの機能は何ですか

JavaScript の stop メソッドは、連続アニメーションやイベントの繰り返し蓄積を防ぐためのもので、構文形式は「$(要素).stop アニメーションを停止するかどうか、現在のアニメーションを完了させるかどうか)」となります。 。 stop() の 2 つの構文パラメータはブール値です。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

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

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

$(selector).stop(stopAll,goToEnd)

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

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

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

以下は対応するコードです:

HTML:

<div id="content">
    <div class="slide_box">
      <div class="img"> 
    <img  src="/static/imghwm/default1.png"  data-src="images/page_a.png"  class="lazy"   alt="JavaScriptのstopメソッドの機能は何ですか" >
        <div class="start"> <a class="start_btn" href="javascript:void(0)">开始抽奖</a> </div>
      </div >
      <div class="img" style="display:none;" > 
    <img  src="/static/imghwm/default1.png"  data-src="images/page_b.png"  class="lazy"   alt="JavaScriptのstopメソッドの機能は何ですか" > 
    <a class="rank_30" href="javascript:void(0);">30级</a> 
    <a class="rank_45" href="javascript:void(0);">45级</a> 
    <a class="rank_55" href="javascript:void(0);">55级</a> 
  </div>
      <div class="img" style="display:none;" > 
    <img  src="/static/imghwm/default1.png"  data-src="images/page_c.png"  class="lazy"   alt="JavaScriptのstopメソッドの機能は何ですか" > 
    <a class="prize_notes" href="javascript:void(0);">奖品记录</a> 
  </div>
    </div>
</div>

CSS:

#content{/* margin-top:10em;*/ width:48em; margin:0 auto;}

#content div{ display:block; width:100%;}

#content div.cont_b{ position:relative; text-align:center;background:url(../images/content_bgb.jpg) no-repeat; background-size:100% 100%;}

#content div img{ display:block; width:100%; border:none;}

#content div .slide_box{ position:absolute; top:0px; width:100%; }

#content div .img .start{ position:absolute; top:290px;}

#content div .img a.start_btn{ display:block; width:150px; height:150px; text-indent:-9999px;  margin:0 auto;}/*修改*/

#content div .img a.rank_30{ position:absolute; top:230px; left:70px; display:block; width:250px; height:60px; text-indent:-9999px;}

#content div .img a.rank_45{ position:absolute; top:230px; left:460px; display:block; width:250px; height:60px; text-indent:-9999px;}

#content div .img a.rank_55{ position:absolute; top:430px; left:170px; display:block; width:280px; height:60px; text-indent:-9999px;}

#content div .img a.prize_notes{ position:absolute; top:470px; right:50px; display:block; width:150px; height:150px; text-indent:-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()メソッドが便利なのでパラメータを削除したり変更したりして試してみてください。お役に立てれば幸いです。

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptのstopメソッドの機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。