Comprendre la méthode jQuery stop()_jquery-js tutoriel-php.cn

Comprendre la méthode jQuery stop()_jquery

WBOY

Libérer： 2016-05-16 16:30:42

original

1814 Les gens l'ont consulté

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 existe 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.

Voici le code correspondant :

HTML :

Copier le code Le code est le suivant :

Démarrer la loterie

CSS :

Copier le code

Le code est le suivant :

#content{/* margin-top:10em;*/ width:48em; margin:0 auto;} #content div{ display:block;largeur: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 largeur:100% } #content div .img .start{ position:absolute; top:290px;}

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

#content div .img a.rank_30{ position:absolute; top:230px left:70px; display:block width:250px;
#content div .img a.rank_45{ position:absolute; top:230px gauche:460px; largeur du bloc:250px;
#content div .img a.rank_55{ position:absolute; top:430px gauche:170px; largeur du bloc:280px;
#content div .img a.prize_notes{ position:absolute; top:470px right:50px;

JS_jQuery :

Copier le code

Le code est le suivant :

var page =$(".slide_box .img");

var page_num = page.length;

var num = 0;

$(".next_btn").click(function(e){

Si(num < 2){

page.slideUp().stop(false,true).eq(num 1).slideDown();

num ;

}autre{

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. J'espère que cela aide tout le monde. Gaga