Verwendung der Methode delay() in jQuery
Die Methode delay() von jQuery setzt einen Timer für die Ausführung des nächsten Elements. Dieses Tutorial demonstriert die Verwendung der Methode delay() in jQuery.
jQuery delay() Methode
delay() ist eine eingebaute Funktion in jQuery, die verwendet wird, um die Ausführung eines bestimmten Elements zu verzögern. Diese Methode ist die beste Wahl, um eine Verzögerung zwischen den jQuery-Effekten in der Warteschlange bereitzustellen.
Die Syntax für diese Methode lautet:
$(selector).delay(parameter1, parameter2);
Wo:
- Der
selectorkann die ID, die Klasse oder der Elementname sein. - Der
parameter1ist die Geschwindigkeit der Verzögerung, die in Millisekunden, langsam oder schnell sein kann. - Der
parameter2wird optional verwendet, um den Queue-Namen anzugeben; der Standardwert istfx, was die Standardeffekt-Warteschlange ist.
Lassen Sie uns Beispiele ausprobieren, um die Wirkung der Methode delay() in jQuery zu zeigen:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box1").delay("slow").fadeIn();
$("#box2").delay("fast").fadeIn();
$("#box3").delay(1000).fadeIn();
$("#box4").delay(2000).fadeIn();
$("#box5").delay(3000).fadeIn();
$("#box6").delay(4000).fadeIn();
});
});
</script>
</head>
<body>
<h1>jQuery delay() method.</h1>
<p>Click the button to show the delay effect. Color boxes will fade in on the click with a delay</p>
<button>Click Here</button>
<br><br>
<div id="box1" style="width : 50px; height : 50px; display : none; background-color : pink;"> slow </div> <br>
<div id="box2" style="width : 50px; height : 50px; display : none; background-color : green;"> fast </div> <br>
<div id="box3" style="width : 50px; height : 50px; display : none; background-color : blue;"> 1 second </div> <br>
<div id="box4" style="width : 50px; height : 50px; display : none; background-color : violet;"> 2 seconds </div> <br>
<div id="box5" style="width : 50px; height : 50px; display : none; background-color : yellow;"> 3 seconds </div> <br>
<div id="box6" style="width : 50px; height : 50px; display : none; background-color : purple;"> 4 seconds </div> <br>
</body>
</html>
Im obigen Code werden die Farbfelder mit der angegebenen Verzögerung eingeblendet. Siehe Ausgabe:
Lassen Sie uns ein weiteres Beispiel in jQuery ausprobieren, das das div basierend auf der delay()-Methode animiert. Siehe das Beispiel:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#DemoButton").click(function() {
$("#DemoDiv").delay("fast").animate({
width: "250px",
padding: "35px"
});
$("#DemoDiv").delay("slow").animate({
width: "350px",
padding: "55px"
});
$("#DemoDiv").delay(1000).animate({
width: "275px",
padding: "50px"
});
$("#DemoDiv").delay(2000).animate({
width: "500px",
padding: "60px"
});
$("#DemoDiv").delay(3000).animate({
width: "200px",
padding: "40px"
});
});
});
</script>
<style>
#DemoDiv {
background-color : lightblue;
width : 200px;
height : 100px;
font-size : 30px;
padding : 10px;
display : block;
}
</style>
</head>
<body>
<div id="DemoDiv">Hello, This is Delftstack.com</div>
<button id="DemoButton">Click Here</button>
</body>
</html>
Der obige Code ändert die Höhe und Breite des div basierend auf der angegebenen Zeitverzögerung. Siehe Ausgabe:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook