Maison >interface Web >js tutoriel >jquery delay() introduction et guide d'utilisation

jquery delay() introduction et guide d'utilisation

巴扎黑original: 2017-06-30 13:13:392208parcourir

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

"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>

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); 
});

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction aux exemples d'exécution retardée jqueryArticle suivant：Introduction aux exemples d'exécution retardée jquery

Articles Liés

Voir plus