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
Recommended:-How to Get Element by class, name, id in jQuery
Recommended:-jQuery Events List with Example
Recommended:-jQuery Click() Event Example
Recommended:-jQuery Blur Event Method Example
Recommended:-jQuery Focus () Event Method Example
Recommended:-jQuery Toggle Show Hide div on Click
Recommended:-jQuery Select Event Method
Recommended:-jQuery Get Selected Dropdown Option Value onchange
Recommended:-jQuery Form Submit On Button Click
Recommended:-jQuery Keydown Event Example
Recommended:-jQuery Detect ENTER key pressed
Recommended:-jQuery keyup() Event Method
Recommended:-jQuery MouseEnter Event Method
Recommended:-jQuery Trigger Mouseleave on Element
Recommended:-jQuery Hover Event Trigger Example
Recommended:-jQuery Trigger Mousedown Event Method
Recommended:-jQuery Trigger Mouseup Event Method
Recommended:-jQuery Mouseover & MouseOut Event Method
Recommended:-jQuery Animation Effect Methods
Recommended:-jQuery FadeIn Animation Example