❮❮ PREV NEXT ❯❯

EFFECTS - fadeToggle()

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://ajax.googleapis.com/ajax/libs/jquery/3.7.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.

❮❮ PREV NEXT ❯❯