suchen

Heim >Web-Frontend >js-Tutorial >Einführung und Verwendung von jQuery Delay () Leitfaden_jquery

Einführung und Verwendung von jQuery Delay () Leitfaden_jquery

WBOY
WBOYOriginal
2016-05-16 16:37:581210Durchsuche

Verzögerung(Dauer,[Warteschlangenname])

Legen Sie eine Verzögerung fest, um die Ausführung nachfolgender Elemente in der Warteschlange zu verzögern.
Neu in jQuery 1.4. 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

queueName: Warteschlangensubstantiv, der Standardwert ist Fx, Animationswarteschlange.

Parameter Beschreibung
Geschwindigkeit Optional. Gibt die Geschwindigkeit der Verzögerung an.
参数 描述
speed 可选。规定延迟的速度。

可能的值：

  • 毫秒
  • "slow"
  • "fast"
queueName 可选。规定队列的名称。

默认是 "fx"，标准效果队列。
Mögliche Werte:
  • Millisekunden
  • "langsam"
  • „schnell“
Warteschlangenname Optional. Gibt den Namen der Warteschlange an. 
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
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(){
  $("#div1").delay("slow").fadeIn();
  $("#div2").delay("fast").fadeIn();
  $("#div3").delay(800).fadeIn();
  $("#div4").delay(2000).fadeIn();
  $("#div5").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>
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>
<div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div><br>
<div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></div><br>
</body>
</html>
Vollständiger Testcode:

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

 $('#footer')
 .css({ 'bottom':-15 })
 .delay(1000)
 .animate({'bottom': 0}, 800); 
});
Animationseffekt für verzögertes Laden von Kopf und Boden

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：jquery realisiert das Navigationsmenü des persönlichen Zentrums, das sehr effektiv und schön ist_jqueryNächster Artikel：jquery realisiert das Navigationsmenü des persönlichen Zentrums, das sehr effektiv und schön ist_jquery

In Verbindung stehende Artikel

Mehr sehen