jQuery FadeToggle Animation Example

jQuery fadeToggle() Animation Effect Method; In this tutorial, i will show you what is fadeToggle animation effect method in jQuery and how to use this method with html elements.

jQuery FadeToggle Animation Effect

The jQuery fadeToggle() method show or hide the selected elements by decreasing or increasing their opacity. If the elements are faded in, it will fade make them faded out and if they are faded out it will fade make them faded in.

Syntax jQuery FadeToggle Animation Effect

 $(selector).fadeToggle();  
$(selector).fadeToggle(speed, callback);
$(selector).fadeToggle(speed, easing, callback);

Parameters of jQuery FadeToggle Animation Effect

  • speed :- The argument ‘speed‘ determines the duration of this effect. Its possible vales are slow, fast and milliseconds.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- This is an optional parameter. you can specify what to do after the fadeIn() method is called.

Example 1 – jQuery FadeToggle Animation Effect

See that fadeToggle() method effect example; as shown below:

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery FadeToggle Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#first").fadeToggle();  
        $("#second").fadeToggle("slow");  
        $("#third").fadeToggle(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>You can ee the fadeToggle() method</p>  
<button>Click here for fade toggle</button><br><br>  
<div id="first" style="width:100px;height:100px;background-color:yellow;"></div><br>  
<div id="second" style="width:100px;height:100px;background-color:red;"></div><br>  
<div id="third" style="width:100px;height:100px;background-color:green;"></div>  
</body>  
</html>     

Example 2 – jQuery FadeToggle Animation Effect with Callback

See that fadeToggle() method effect with callback example; as shown below:

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery FadeOut Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#first").fadeToggle();  
        $("#second").fadeToggle("slow");  
        $("#third").fadeToggle(3000,function(){
        	alert("The fade-toggle effect is completed click again on button.");
        });  
    });  
});  
</script>  
</head>  
<body>  
<p>You can ee the fadeToggle() method</p>  
<button>Click here for fade toggle</button><br><br>  
<div id="first" style="width:100px;height:100px;background-color:yellow;"></div><br>  
<div id="second" style="width:100px;height:100px;background-color:red;"></div><br>  
<div id="third" style="width:100px;height:100px;background-color:green;"></div>  
</body>  
</html>   

Recommended jQuery Tutorials

Leave a Comment