jQuery FadeTo Effect By Example

jQuery FadeTo Effect By Example

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.

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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