JQUERY - FADE EFFECTS

Say, when an element is getting hidden or becomes visible, you want to get a fading effect.

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

	<body>
    	
    	<p> Hide this element by clicking the below button with a Fading effect </p>
    	<button> Click to hide the above element </button> <br/><br/>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').fadeOut();
            });
            
      	</script>      
  	</body>
</html>

And interestingly, you can hide the above element using fade out effect in one line. i.e. The fadeOut() function.

And if you want to make the same hidden element visible using fade in effect, you can do it using the fadeIn() function.

Now, this fade out and fade in effects are the Fade Effects.

There is four types of Fade Effect :

fadeOut() - To Hide an HTML element using fade out effect.

fadeIn() - To make the hidden element visible using fade in effect.

fadeToggle() - It is a combination of fade in and fade out effect. i.e. Hides the visible element with fade out effect and if the element is hidden, makes it visible using fade in effect.

fadeTo() - It is used to fade an element upto a certain extent provided.

Let the clear the effects with the below example.

fadeOut() Effect

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.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 <p> 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 <p> element,

$('p').fadeOut();

And fades out the <p> 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 <p> 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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.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 <p> element is hidden with faded effect in 1000 milliseconds and once the <p> element is completely hidden, we get the alert The element is faded out.

fadeIn() Effect

The fadeIn() Effect is used to make the hidden element visible using fade in effect.

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

	<body>
		<h1> JQuery </h1>
    	
    	<p> This is a sentence </p>
    	<button class = 'fadeOutClass'> Fade Out </button>
    	<button class = 'fadeInClass'> Fade In </button> 
	  
      	<script>
      
			$('button.fadeOutClass').click( function() { 
            	$('p').fadeOut();
            });
            
            $('button.fadeInClass').click( function() { 
            	$('p').fadeIn();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above example, we have a <p> element,

<p> This is a sentence </p>

And two <button> elements,

The first button is used to fade out the element.

<button class = 'fadeOutClass'> Fade Out </button>

And the second button is used to show the hidden element.

<button class = 'fadeInClass'> Fade In </button>

We have already seen, how the fade out effect works.

Now, let us see, how the fade in effect can be used to show the hidden element with fade in effect.

So, on Fade Out button click, the <p> element gets hidden with fade out effect.

<p> This is a sentence </p>

Now, to unhide the above <p> element, we have the below JQuery code,

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

And JQuery locates the <p> element,

$('p').fadeIn();

And unhides the <p> element using fadeIn() effect.

fadeIn() Effect with speed and 'callback function'

Now, let's say, you want to display a message, stating the element is visible with fade in effect. And you can achieve it using a callback function.

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

	<body>
		<h1> JQuery </h1>
    	
    	<p> This is a sentence </p>
    	<button class = 'fadeOutClass'> Fade Out </button>
    	<button class = 'fadeInClass'> Fade In </button> 
	  
      	<script>
      
			$('button.fadeOutClass').click( function() { 
            	$('p').fadeOut();
            });
            
            $('button.fadeInClass').click( function() { 
            	$('p').fadeIn(1000, function() {
            		alert("The element is visible with fade in effect")
            	});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above JQuery statement,

$('button.fadeInClass').click( function() {
	$('p').fadeIn(1000, function() {
		alert("The element is visible with fade in effect")
	});
});

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

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

Now, if you see the callback function,

function() {
	alert("The element is visible with fade in effect")
}

It displays an alert,

alert("The element is visible with fade in effect")

That the element is visible with fade in effect.

In simple words, on button click the <p> element is hidden with fade out effect in 1000 milliseconds and once the <p> element is completely visible after second button click, we get the alert The element is visible with fade in effect.

fadeToggle() Effect

The fadeToggle() Effect is a combination of fade in and fade out effect. i.e. Hides the visible element with fade out effect and if the element is hidden, makes it visible using fade in effect.

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

	<body>
		<h1> JQuery </h1>
    	
    	<p> This is a sentence </p>
    	<button> FadeOut / FadeIn </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').fadeToggle();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above example, we have a <p> element,

<p> This is a sentence </p>

And a <button> element,

<button> FadeOut / FadeIn </button>

And on buton click, the JQuery action gets triggered,

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

And the fadeToggle() effect gets triggered. So, if the <p> element is hidden, it shows it with faded effect and it the <p> element is visible, it hides it with faded effect.

Similarly, you can use the speed and callback function with fadeToggle() effect.

fadeTo() Effect

The fadeTo() Effect is used to fade an element upto a certain extent provided.

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

	<body>
		<h1> JQuery </h1>
    	
    	<p> Fade this element by clicking the below button with a Fading effect </p>
    	<button> Click to fade the above element </button>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').fadeTo(1000, 0.5);
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above example, we have a <p> element,

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

And a <button> element,

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

And on button click, we want to fade out the above element upto a certain extent. i.e. We want to hide the element, but fade it upto an extent and stop.

And it happens with the JQuery code,

$('button').click( function() {
	$('p').fadeTo(1000, 0.5);
});

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

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

And JQuery locates the <p> element,

$('p').fadeTo(1000, 0.5);

And if you see the output, the <p> element is faded upto an extent and stopped. This happened due to the second parameter.

The more you decrease the second parameter, the more faded effect you get. Just remember to keep the value of the second parameter between 1 and 0.

i.e. If the value of the second parameter is equal to 1, there would be no change. And if the value is equal to 0, the element would be completely hidden.

❮❮ PREV NEXT ❯❯