Einführung und Verwendungsleitfaden zu jQuery Delay()-js-Tutorial-php.cn

Einführung und Verwendungsleitfaden zu jQuery Delay()

巴扎黑

Freigeben： 2017-06-30 13:13:39

Original

2212 Leute haben es durchsucht

.delay() wird am besten in jQuery-Animationseffekten und ähnlichen Warteschlangen verwendet. Aufgrund seiner eigenen Einschränkungen, wie z. B. der Unfähigkeit, die Verzögerung abzubrechen – .delay() – ist es jedoch kein Ersatz für die native setTimeout-Funktion von JavaScript, die für bestimmte Anwendungsfälle möglicherweise besser geeignet ist. delay(duration,[queueName])

Legt eine Verzögerung fest, um die Ausführung nachfolgender Elemente in der Warteschlange zu verzögern.

jQuery 1.4

Neu
. Wird verwendet, um die Ausführung von Funktionen in der Warteschlange zu verzögern. Es kann entweder die Ausführung der Animationswarteschlange verzögern oder in einer benutzerdefinierten Warteschlange verwendet werden. Dauer: Verzögerungszeit, Einheit: Millisekunden

Warteschlangenname: Warteschlangensubstantiv, der Standardwert ist Fx, Animationswarteschlange.

Parameter

Beschreibung

Geschwindigkeit

Optional. Gibt die Geschwindigkeit der Verzögerung an.
Mögliche Werte:

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

毫秒

"slow"

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

默认是 "fx"，标准效果队列。
Millisekunden
"slow" li >

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

Nach dem Login kopieren

"fast"

queueName

Optional. Gibt den Namen der Warteschlange an.

Der Standardwert ist „fx“, die Standardeffektwarteschlange.

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

Nach dem Login kopieren

Vollständiger Testcode:

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

Nach dem Login kopieren

Beispiel: Animationseffekt für verzögertes Laden von Kopf und Boden

Das obige ist der detaillierte Inhalt vonEinführung und Verwendungsleitfaden zu jQuery Delay(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!