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.
|
||||||
| Warteschlangenname | Optional. Gibt den Namen der Warteschlange an.
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
}); Nach dem Login kopieren |
<!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>
Beispiel:
$(document).ready(function() {
$('#header')
.css({ 'top':-50 })
.delay(1000)
.animate({'top': 0}, 800);
$('#footer')
.css({ 'bottom':-15 })
.delay(1000)
.animate({'bottom': 0}, 800);
});
