Maison > Article > interface Web > A quoi sert la méthode jquery stop() ?
A quoi sert la méthode jquery stop() ?
- 青灯夜游original
- 2022-03-01 18:32:382871parcourir
Dans jquery, la méthode stop() est utilisée pour arrêter l'effet d'animation en cours d'exécution pour l'élément sélectionné. La syntaxe est "$(selector).stop(stopAll,goToEnd)" ; les paramètres stopAll et goToEnd sont des paramètres facultatifs. Les valeurs sont toutes booléennes et les valeurs par défaut sont toutes fausses.
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.
Dans jquery, la méthode stop() est utilisée pour arrêter l'effet d'animation en cours d'exécution pour l'élément sélectionné.
Syntaxe :
$(selector).stop(stopAll,goToEnd)
stopAll et goToEnd sont des paramètres facultatifs, leurs valeurs sont des valeurs booléennes et les valeurs par défaut sont fausses. stopAll signifie arrêter l'animation de la file d'attente. Lorsque la valeur est fausse, seule l'animation en cours est arrêtée ; lorsque la valeur est vraie, l'animation en cours et toutes les animations de file d'attente suivantes sont arrêtées. goToEnd signifie passer l'animation à l'état final de l'effet d'animation actuel.
Parmi elles, la méthode stop() a 4 formes, comme le montre le tableau 1.
| Forme | Description |
|---|---|
| stop() | est équivalent à stop(false, false), qui arrête uniquement l'animation en cours et les animations ultérieures sera également Vous pouvez continuer à exécuter |
| stop(true) | équivaut à stop(true, false), arrêter l'animation en cours et arrêter l'animation suivante |
| stop(true, true) | Le l'animation actuelle continue de s'exécuter, arrêtez uniquement l'animation suivante |
| stop(false, true) | Arrêtez l'animation en cours, passez à la dernière animation et exécutez la dernière animation |
De manière générale, nous utilisons uniquement arrêter le développement réel () Le premier paramètre de la méthode, le deuxième paramètre est rarement utilisé.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.color.js"></script>
<script>
$(function () {
$("#btn-start").click(function () {
$("div").animate({ "width": "200px" }, 2000)
.animate({ "background-color": "red" }, 2000)
.animate({ "height": "200px" }, 2000)
.animate({ "background-color": "blue" }, 2000);
});
$("#btn-stop").click(function () {
$("div").stop();
})
})
</script>
</head>
<body>
<input id="btn-start" type="button" value="开始" />
<input id="btn-stop" type="button" value="停止" /><br />
<div></div>
</body>
</html>L'effet d'aperçu est affiché dans l'image ci-dessous.
Dans cet exemple, nous définissons 4 animations en utilisant la méthode animate(). Après avoir cliqué sur le bouton [Démarrer], si nous cliquons à nouveau sur le bouton [Stop] après un certain temps, cela arrêtera immédiatement l'animation en cours d'exécution (c'est-à-dire arrêtera la méthode animate() actuelle), puis passera à l'animation suivante. (c'est-à-dire la prochaine méthode animate()).
Si vous cliquez à nouveau sur le bouton [Stop], vous passerez à l'animation suivante, et ainsi de suite. Les amis peuvent le tester eux-mêmes pour le ressentir.
Si vous souhaitez arrêter toutes les animations de file d'attente, vous pouvez le faire en définissant le premier paramètre de la méthode stop() comme vrai. Le code est le suivant :
$("#btn-stop").click(function () {
$("div").stop(true);
})Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("div").hover(function () {
$(this).animate({ "height": "150px" }, 500);
}, function () {
$(this).animate({ "height": "50px" }, 500); //移出时返回原状态
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>L'effet d'aperçu est affiché dans le fichier. figure ci-dessous.
Dans cet exemple, nous utilisons la méthode hover() pour définir l'effet d'animation lorsque le pointeur de la souris entre et sort. Lorsque nous déplaçons ou retirons rapidement des éléments, nous découvrons un bug très étrange : l'élément continue de s'allonger ou de se raccourcir ! En d’autres termes, l’animation continuera à s’exécuter et ne pourra pas être arrêtée du tout.
Ce type de bug "ne peut pas arrêter" est souvent rencontré dans le développement réel, les amis doivent donc y prêter une attention particulière. En fait, ce bug est causé par l'accumulation d'animations. Dans jQuery, si une animation n'est pas terminée, elle sera ajoutée à la "file d'attente d'animation". Dans cet exemple, chaque fois qu'un élément est déplacé vers l'intérieur ou l'extérieur, une animation sera générée. Si l'animation n'est pas terminée, elle sera ajoutée à la file d'attente d'animation, puis l'animation qui n'est pas terminée continuera à l'être. exécuté jusqu'à ce que toutes les animations soient terminées.
Pour ce bug, il suffit d'ajouter la méthode stop() avant que l'animation générée par le déplacement d'éléments entrants ou sortants ne soit exécutée, et cela peut être facilement résolu. Le code final modifié est le suivant.
$("div").hover(function () {
$(this).stop().animate({ "height": "150px" }, 500);
}, function () {
$(this).stop().animate({ "height": "50px" }, 500); //移出时返回原状态
})Pour ce genre de bug causé par l'accumulation d'animations, nous pouvons également utiliser is(":animated") pour déterminer l'état actuel de l'animation et le résoudre. La méthode is(":animated") sera présentée en détail plus tard.
En fait, jQuery dispose également d'une méthode pour interrompre l'animation-finish(). Cette méthode fonctionne de manière similaire à la méthode stop(true,true) dans la mesure où elle efface l'animation en file d'attente et fait passer l'animation actuelle à sa valeur finale. Cependant, contrairement à stop(true,true), toutes les animations en file d'attente passent à leurs valeurs finales. La méthode finish() n’est pas beaucoup utilisée, jetons-y un bref coup d’œil.
【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo de développement web front-end】
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!