jquery delay() introduction et guide d'utilisation-js tutoriel-php.cn

jquery delay() introduction et guide d'utilisation

巴扎黑

Libérer： 2017-06-30 13:13:39

original

2212 Les gens l'ont consulté

.delay() est mieux utilisé dans les effets d'animation jQuery et les files d'attente similaires. Cependant, en raison de ses propres limitations, telles que l'impossibilité d'annuler le délai - .delay(), il ne remplace pas la fonction setTimeout native de JavaScript, qui peut être plus adaptée à certains cas d'utilisation. delay(duration,[queueName])

Définit un délai pour retarder l'exécution des éléments suivants dans la file d'attente.

jQuery 1.4

Nouveau
. Utilisé pour retarder l'exécution des fonctions dans la file d'attente. Il peut soit retarder l'exécution de la file d'attente d'animation, soit être utilisé dans une file d'attente personnalisée. durée : temps de retard, unité : millisecondes

queueName : nom de la file d'attente, la valeur par défaut est Fx, file d'attente d'animation.

Paramètres

Description

vitesse

Facultatif. Spécifie la vitesse du retard.
Valeurs possibles :

参数描述
speed
可选。规定延迟的速度。
可能的值：

毫秒

"slow"

"fast"
queueName 可选。规定队列的名称。

默认是 "fx"，标准效果队列。
millisecondes
"lent" li >

$("button").click(function(){
$("#p1").delay("slow").fadeIn();
$("#p2").delay("fast").fadeIn();
});

Copier après la connexion

"rapide"

queueName

Facultatif. Spécifie le nom de la file d'attente.

La valeur par défaut est "fx", la file d'attente d'effets standard.

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("#p1").delay("slow").fadeIn();
  $("#p2").delay("fast").fadeIn();
  $("#p3").delay(800).fadeIn();
  $("#p4").delay(2000).fadeIn();
  $("#p5").delay(4000).fadeIn();
 });
});
</script>
</head>

<body>
<p>This example sets different speed values for the delay() method.</p>
<button>Click to fade in boxes with a delay</button>
<br><br>
<p id="p1" style="width:90px;height:90px;display:none;background-color:black;"></p><br>
<p id="p2" style="width:90px;height:90px;display:none;background-color:green;"></p><br>
<p id="p3" style="width:90px;height:90px;display:none;background-color:blue;"></p><br>
<p id="p4" style="width:90px;height:90px;display:none;background-color:red;"></p><br>
<p id="p5" style="width:90px;height:90px;display:none;background-color:purple;"></p><br>
</body>
</html>

Copier après la connexion

Code de test complet :

$(document).ready(function() {
 $(&#39;#header&#39;)
 .css({ &#39;top&#39;:-50 })
 .delay(1000)
 .animate({&#39;top&#39;: 0}, 800);

 $(&#39;#footer&#39;)
 .css({ &#39;bottom&#39;:-15 })
 .delay(1000)
 .animate({&#39;bottom&#39;: 0}, 800); 
});

Copier après la connexion

Exemple : Effet d'animation à chargement retardé en tête et en bas

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!