EFFECTS - fadeTo()

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 ❯❯