Blog Archive

jQuery fadeTo() animation effect with easing and callback example

jQuery fadeTo() method animates and adjusts the opacity of the matched elements. Duration and opacity are required parameters. You can also provide the additional options such as easing and callback.
  • duration 
    • A string or number determining how long the animation will run. 
  • opacity
    • A number between 0 and 1 denoting the target opacity.
  • easing 
    • A string indicating which easing function to use for the transition.
  • callback 
    • A function to call once the animation is complete.
The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, the default duration of 400 milliseconds is used. Here is how to use ...


jQuery fadeTo() example jQuery fadeTo() example

<html>
<head>
<title>jQuery fadeTo() example</title>

<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<style type="text/css">
 .someText{
  margin-top:16px;
  width:500px;
  height:250px;
  background-color:#8b8378;
  color:#ffffff;
 }
</style> 
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
 type="text/javascript"></script>
<script
 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
 type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {
          
         $("#myButton").click(function () {
          $('#section').fadeTo(2000,0.25, 'swing', function() {
           //callback function after animation finished
           $("#myButton").attr('value','fadeTo() is now Complete');
              });
         });
        
        });     
    </script>

</head>
<body>
 <fieldset>
   <legend>jQuery page animation using fadeTo()</legend>
   <div>
    <input id="myButton" type="button"
     value="Click here to see fadeTo()" />
   </div>  
   <div id="section" class="someText">
    Just some TEXT for JQuery page Animation ...
   </div>
   
 </fieldset>
</body>
</html>