Blog Archive

jQuery fadeOut() animation effect with easing and callback example

jQuery fadeOut() method animates and changes the opacity to 0 for the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page. You can also provide the following options
  • duration 
    • A string or number determining how long the animation will run.
  • 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 the duration parameter is omitted, the default duration of 400 milliseconds is used. Here is how to use ...


jQuery fadeOut() example jQuery fadeOut() example

<html>
<head>
<title>jQuery fadeOut() 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').fadeOut(2000, 'swing', function() {
           //callback function after animation finished
           $("#myButton").attr('value','fadeOut() is now Complete');
              });
         });
        
        });     
    </script>

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

1 comment :