jQuery FadeTo Animation Example

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

Leave a Comment