Animation Effect jQuery FadeToggle

jQuery fadeToggle() Animation Method – how to use this method with html elements . We are going to show you with simple example how to use this effects. Here you will learn how use fade toggle on selected html elements using jQuery.

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

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

Parameters of fadeToggle method

  • 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.

jQuery fadeToggle() example

In the below example you can see that fadeToggle() method effect.

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

In this above example of fadeToggle() method, you can see that fadeToggle() effect on html elements

fadeToggle() and callback example

<!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>   
Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *