jQuery Api FadeTo Animation Effect

jQuery Animation fadeTo() 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 fadeTo on selected html elements.

jQuery fadeTo Animation Effect

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

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

Parameters of fadeTo 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.

jQuery fadeTo() example

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

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

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

fadeTo() and callback example

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

In this above example of fadeTo() method with callback, you can see that fadeTo() effect on html elements.

Spread the love

Be First to Comment

Leave a Reply

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