Welche Funktion hat die Stop-Methode in Javascript?

Die Stop-Methode in JavaScript soll eine wiederholte Anhäufung in fortlaufenden Animationen oder Ereignissen verhindern. Das Syntaxformat lautet „$(element).stop, ob die Animation gestoppt werden soll und ob die aktuelle Animation abgeschlossen werden soll). Die beiden syntaktischen Parameter von stop() sind boolesche Werte.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Als Frontend-Entwickler sind JS und JQuery Entwicklungssprachen und Toolbibliotheken, die wir häufig verwenden. Wir alle wissen, dass es in jQuery eine sehr leistungsstarke Methode gibt – stop(), eine Methode, die eine wiederholte Anhäufung in kontinuierlichen Animationen oder Ereignissen verhindert. Wie benutzt man stop()? Lassen Sie uns zunächst stop() vorstellen:

stop() hat zwei Parameter in der Syntax, die beide boolesche Werte sind. Und sie sind alle optional, aber es gibt auch Vorschriften wie folgt:

$(selector).stop(stopAll,goToEnd)

Parameter: (Wenn keine Parameter geschrieben werden, werden standardmäßig beide Parameter als falsch betrachtet.)

stopAll: Optional. Gibt an, ob alle in der Warteschlange befindlichen Animationen des ausgewählten Elements gestoppt werden sollen. Das heißt, wenn der Parameterwert wahr ist, werden alle nachfolgenden Animationen oder Ereignisse gestoppt. Wenn der Parameterwert „false“ ist, wird nur die aktuell vom ausgewählten Element ausgeführte Animation gestoppt und nachfolgende Animationen werden nicht beeinflusst. Daher ist dieser Parameter im Allgemeinen falsch.

goToEnd: Optional. Gibt an, ob die aktuelle Animation abgeschlossen werden darf. Dieser Parameter kann nur verwendet werden, wenn der stopAll-Parameter festgelegt ist. Wie oben erwähnt, schreiben wir normalerweise den Fasle-Wert für den stopAll-Parameter, nicht den Standardwert, sondern den tatsächlichen Parameter. Dann gibt es zwei Optionen für den goToEnd-Parameter: eine ist falsch und die andere ist wahr. Jeder sollte die Bedeutung verstehen. Im Allgemeinen wahr. Dies bedeutet, dass die aktuelle Animation abgeschlossen werden kann.

Das Folgende ist der entsprechende Code:

HTML:

<div id="content">
    <div class="slide_box">
      <div class="img"> 
    <img src="images/page_a.png">
        <div class="start"> <a class="start_btn" href="javascript:void(0)">开始抽奖</a> </div>
      </div >
      <div class="img" style="display:none;" > 
    <img src="images/page_b.png"> 
    <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="images/page_c.png"> 
    <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;

}

});

});

Das Obige ist die Ereignisakkumulation, die beim Schreiben eines Klickereigniseffekts bei der Arbeit auftritt nützlich Gehen Sie zur stop()-Methode. Sie können die Parameter entfernen oder ändern und es ausprobieren. Ich hoffe, es hilft allen.

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene】

Das obige ist der detaillierte Inhalt vonWelche Funktion hat die Stop-Methode in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!