Quelle est la fonction de la méthode stop en javascript

La méthode d'arrêt en JavaScript consiste à empêcher l'accumulation répétée dans des animations ou des événements continus. Le format de syntaxe est "$(element).stop s'il faut arrêter l'animation et s'il faut autoriser la fin de l'animation en cours)". Les deux paramètres syntaxiques de stop() sont des valeurs booléennes.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

En tant que développeurs front-end, JS et JQuery sont des langages de développement et des bibliothèques d'outils que nous utilisons souvent. Nous savons tous qu'il existe une méthode très puissante dans jQuery - stop(), qui est une méthode permettant d'empêcher une accumulation répétée dans des animations ou des événements continus. Alors, comment utiliser stop() ? Commençons par vous présenter stop() :

stop() a deux paramètres dans la syntaxe, qui sont tous deux des valeurs booléennes. Et ils sont tous facultatifs, mais il y a aussi des réglementations, comme suit :

$(selector).stop(stopAll,goToEnd)

Paramètres : (Par défaut, si aucun paramètre n'est écrit, les deux paramètres seront considérés comme faux.)

stopAll : Facultatif. Spécifie s'il faut arrêter toutes les animations en file d'attente de l'élément sélectionné. Cela signifie que si la valeur du paramètre est vraie, toutes les animations ou événements suivants seront arrêtés. Si la valeur du paramètre est fausse, seule l'animation actuellement exécutée par l'élément sélectionné sera arrêtée et les animations suivantes ne seront pas affectées. Ce paramètre est donc généralement faux.

goToEnd : facultatif. Spécifie s’il faut autoriser la réalisation de l’animation actuelle. Ce paramètre ne peut être utilisé que lorsque le paramètre stopAll est défini. Comme nous l'avons dit ci-dessus, nous écrivons généralement la valeur fasle du paramètre stopAll, pas la valeur par défaut, mais le paramètre réel. Ensuite, il existe deux options pour le paramètre goToEnd, l'une est fausse et l'autre est vraie. Tout le monde devrait en comprendre le sens. Généralement vrai. Cela signifie permettre à l’animation en cours de se terminer.

Ce qui suit est le code correspondant :

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;

}

});

});

Ce qui précède est l'accumulation d'événements rencontrée lors de l'écriture d'un effet d'événement de clic au travail, c'est le cas. utile Accédez à la méthode stop() Vous pouvez supprimer ou modifier les paramètres et essayer. J'espère que cela aide tout le monde.

【Apprentissage recommandé : Tutoriel avancé javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!