Heim > Artikel > Web-Frontend > Einführung und Verwendungsleitfaden zu jQuery Delay()

Einführung und Verwendungsleitfaden zu jQuery Delay()

巴扎黑Original: 2017-06-30 13:13:392179Durchsuche

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

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

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in Beispiele für die verzögerte Ausführung von JQueryNächster Artikel：Einführung in Beispiele für die verzögerte Ausführung von JQuery

In Verbindung stehende Artikel

Mehr sehen