Comment annuler la méthode de retard dans jquery-Questions et réponses frontales-php.cn

Comment annuler la méthode de retard dans jquery

WBOY

Libérer： 2022-06-01 18:24:15

original

2348 Les gens l'ont consulté

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();".

Comment annuler la méthode de retard dans jquery

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)

Copier après la connexion

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)

Copier après la connexion

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>

Copier après la connexion

Résultat de sortie :

Comment annuler la méthode de retard dans jquery