jQuery delay()
Jquery is used to end a task late and if a task is in progress, then it works to stop it for some time. In other words, it is done to start some work late.
Syntax:
$(selector).delay (speed)
$(selector).delay (speed, queueName)
Speed and queueName is an optional parameter. Speed specifies the delay of showing elements these possible vales are 'slow', 'fast' and milliseconds.
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('#div1').delay().fadeIn();
$('#div2').delay('slow').fadeIn();
$('#div3').delay(1000).fadeIn();
$('#div4').delay(2000).fadeIn();
$('#div5').delay(500).fadeIn();
});
});
</script>
<style>
main {
display:flex;
}
div {
width: 150px;
height: 150px;
display: none;
padding:10px;
}
</style>
</head>
<body>
<button>Click me</button>
<main>
<div id='div1' style='background-color: red;'></div>
<div id='div2' style='background-color: green;'></div>
<div id='div3' style='background-color: blue;'></div>
<div id='div4' style='background-color: pink;'></div>
<div id='div5' style='background-color: navy;'></div>
</main>
</body>
</html>
