jQuery delay() Effect

The jQuery delay method is used to delay the execution of the function in the queue.

Syntax of delay() Effect

$(selector).delay(speed, queue_name) 

The selector is the element on which delay effect occurs. Both speed and queue_name are optional parameters. The speed parameter specifies either in milliseconds or a few predefined strings, slow and fast.

Example

<p id="txt" style="display:none;">This is testing content.
This is testing content.
This is testing content.
This is testing content.
</p>
<button id="btn1">Start Fading</button>

<script>
$(document).ready(function(){
 $("button#btn1").click(function() {
$("p#txt").delay().fadeIn();
});
});
</script>

Output of the above code


In the above example, when the user click on the 'Start Fading' button, the paragraph of 'txt' id get faded.

Example - delay() with speed

<style>
.demobox1 { 
width: 200px; 
height: 150px; 
background-color: #FFCC99;
border: 3px solid black;
padding: 25px;
display: none;
}
</style>

<div id="delayefct" class="demobox1"> Demo Box</div>
<button id="btn">Start Sliding</button>

<script>
$(document).ready(function(){
$("button#btn").click(function() {
$("div#delayefct").slideDown( 300 ).delay( 800 ).fadeIn( 400 );
});
});
</script>

Output of the above code



Demo Box

In the above example, when the user click on the 'Start Sliding' button, the div box of 'delayefct' id get slide down according to the given delay speed.



Read more articles


General Knowledge



Learn Popular Language