jQuery Animation fadeTo() Method; In this tutorial, i am going to show you what is jQuery fadeTo() animation effect method and how to use this method with html elements .
jQuery FadeTo Animation Method
As defined by the name, the fadeTo () method is used for the faded selected HTML element. This fadeTo () method is similar to the fadeIn () method, but unlike fadeIn () to fadeTo () method.
Syntax jQuery FadeTo Animation Method
$(selector).fadeTo();
$(selector).fadeTo(speed, callback);
$(selector).fadeTo(speed, easing, callback);
Parameters of jQuery FadeTo Animation Method
- speed :- The argument ‘speed‘ determines the duration of this effect.
- easing :- It specifies the easing function to be used for transition.
- callback :- Ihis is an optional parameter. you can specify what to do after the fadeTo() method is called.
Example 1 – jQuery FadeTo Animation Method
See jQuery animation fadeTo() method effect; as shown below:
<!DOCTYPE html> <html> <head> <title>jQuery FadeTo Method</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#first").fadeTo("slow",0.5); $("#second").fadeTo("slow",0.6); $("#third").fadeTo("slow",0.7); }); }); </script> </head> <body> <p>You can ee the fadeTo() method</p> <button>Click here for fade to</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 FadeTo Animation Method with Callback
See jQuery animation fadeTo() method effect with callback; as shown below:
<!DOCTYPE html> <html> <head> <title>jQuery FadeTo Method</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#first").fadeTo("slow",0.5); $("#second").fadeTo("slow",0.6); $("#third").fadeTo(3000,0.7,function(){ alert("The fade-to effect is completed."); }); }); }); </script> </head> <body> <p>You can ee the fadeTo() method</p> <button>Click here for fade to</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
Recommended:-Fade Out Animation jQuery