Maison > Article > interface Web > jquery delay() introduction et guide d'utilisation
jquery delay() introduction et guide d'utilisation
- 巴扎黑original
- 2017-06-30 13:13:392131parcourir
.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.4Nouveau
. 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 :
|
||||||
| 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() {
$('#header')
.css({ 'top':-50 })
.delay(1000)
.animate({'top': 0}, 800);
$('#footer')
.css({ 'bottom':-15 })
.delay(1000)
.animate({'bottom': 0}, 800);
});Exemple : Effet d'animation à chargement retardé en tête et en basCe 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!