EFFECTS - delay()

The delay() Effect is used to delay an effect execution for a certain amount of time.

Say, you want to hide a <p> element with fade out and as we know, we can use fadeOut() effect for that.

Now, what if you want the <p> element after certain amount of time. And this is where the delay() effect comes in picture. The delay parameter could be fast, slow or milliseconds.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p> Hide this element by clicking the below button </p>
    	<button> Click to hide the above element </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').delay(1000).fadeOut();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you look at the JQuery statement.

$('button').click( function() {
	$('p').delay(1000).fadeOut();
});

In the JQuery statement, we have used the delay() effect to delay the fade out effect for 1000 milliseconds.

NEXT ❯❯