Comprendre la méthode jQuery stop()

Objectif de cet article : Afin de comprendre l'utilisation de stop(), prenons un exemple et voyons-le de manière intuitive. C'est très simple et pratique. Les amis qui en ont besoin peuvent s'y référer

En tant que développeurs front-end, JS et JQuery sont les langages de développement et les 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, ils seront Les deux paramètres sont 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.

Voici le code correspondant :

HTML :

Copier le codeLe code est le suivant :

 

 

 
      

javascript:void(0)">Démarrer la loterie < /p>
 

 

 
Niveau 30
  Niveau 45
Niveau 55

 

  javascript:void(0);">Record du prix

CSS :

Le code est le suivant :

#content{/*

margin-top:10em;*/ width:48em margin:0 auto; >#content p{ display:block; width:100%;>
#content p.cont_b{ position:relative;
text-align:center;background :url (../images/content_bgb.jpg) no-repeat; background-size:100% 100%;}#content p img{ display:block width:100%; :none ;}
#content p .slide_box{ position:absolute; top:0px; width:100%; }
#content p .img .start{ position:absolute; #content p .img a.start_btn{ display:block; width:150px; height:150px;
text-indent
:-9999px; margin:0 auto;}/*Modify*/#content p .img a.rank_30{ position:absolute; top:230px gauche:70px; display:block width:60px; { position : absolu ; haut : 230 px ; gauche : 460 px ; affichage : largeur du bloc : 250 px; :430px ; gauche :170px ; affichage : bloc largeur : 280 px ; hauteur : 60 px ; texte-indent : -9999px; ; display :block; width:150px; height:150px; text-indent:-9999px;}
JS_jQuery :

Le code est le suivant :

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és lors de l'écriture d'un effet d'événement de clic au travail. Dans la partie JS, la méthode stop() est utile. Vous pouvez supprimer ou modifier les paramètres et l'essayer. .

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!