Maison > Article > interface Web > Comment annuler la méthode de retard dans jquery
Comment annuler la méthode de retard dans jquery
- WBOYoriginal
- 2022-06-01 18:24:152322parcourir
Dans jquery, vous pouvez utiliser la méthode stop() pour annuler le temps de retard défini par la méthode delay(). La méthode stop() est utilisée pour arrêter l'animation en cours pour l'élément sélectionné et peut également mettre fin au retard. time. La syntaxe est "be L'objet élément défini par la méthode delay.stop();".
L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.
Comment annuler la méthode delay dans jquery
La méthode stop() arrête l'animation en cours d'exécution pour l'élément sélectionné.
Syntaxe
$(selector).stop(stopAll,goToEnd)
Description du paramètre
stopAll Facultatif. Une valeur booléenne qui spécifie s'il faut arrêter toutes les animations en file d'attente de l'élément sélectionné. La valeur par défaut est faux.
goToEnd Facultatif. Une valeur booléenne qui spécifie s'il faut terminer l'animation en cours immédiatement. La valeur par défaut est faux. La méthode
delay() définit un délai pour l'exécution du prochain élément de la file d'attente.
Grammar
$(selector).delay(speed,queueName)
L'exemple est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(800).fadeIn();
$("#div4").delay(2000).fadeIn();
$("#div5").delay(4000).fadeIn();
});
$("#stop").click(function(){
$("div").stop();
});
});
</script>
</head>
<body>
<p>这个实例使用 delay() 方法来设置不同的速度值。 </p>
<button>点击按钮，显示多个的 div 框。</button><button id="stop">停止延迟</button>
<br><br>
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>
<div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div><br>
<div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></div><br>
</body>
</html>Résultat de sortie :
Recommandation de didacticiel vidéo associé : Tutoriel vidéo jQuery
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!