EFFECTS - fadeOut()

The fadeOut() effect is used to hide an element using faded effect.

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 with a Fading effect </p>
    	<button> Click to hide the above element </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').fadeOut();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above example, we have a  element,

<p> Hide this element by clicking the below button with a Fading effect </p>

And a <button> element,

<button> Click to hide the above element </button>

And on button click, we want to fade out the above element. i.e. We want to hide the element using a fading effect.

And it happens with the JQuery code,

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

So, what happens is, on button click, the click() event gets triggered,

$('button').click(...);

And JQuery locates the  element,

$('p').fadeOut();

And fades out the  element using the fadeOut() effect.

And that's it. The element is hidden with faded effect.

fadeOut() Effect with fade speed

Now, what if you want the  element to be faded slowly. And there is a second parameter that determines the speed as in how to fade the element. It 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').fadeOut(1000);
            });
            
      	</script>      
  	</body>
</html>

Output :

So, there is this parameter in fadeOut() effect that determines that how slowly the element would be faded out or hidden.

fadeOut() Effect with speed and 'callback function'

Now, let's say, you want to display a message, stating the element is totally faded out. You can achieve it using a callback function.

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 using fade effect by clicking the below button </p>
    	<button> Click to fade out the above element </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').fadeOut(1000, function() {
            		alert("The element is faded out")
            	});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above JQuery statement,

$('button').click( function() {
	$('p').fadeOut(1000, function() {
		alert("The element is faded out")
	});
});

Along with the fadeOut() effect, we have used the hide speed as the first parameter and callback function as the second parameter.

Note : The values passed to the 'hide()' effect are called parameters.

Now, if you see the callback function,

function() {
	alert("The element is faded out")
}

It displays an alert,

alert("The element is faded out")

That the element is hidden with faded effect.

In simple words, on button click the  element is hidden with faded effect in 1000 milliseconds and once the  element is completely hidden, we get the alert, The element is faded out.

❮❮ PREV NEXT ❯❯