Blog Archive

jQuery show() effect with easing and callback example

jQuery show() method will make the matched elements visible immediately without any animation. If you want to animate while displaying the matched element then 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 parameters are omitted, the default duration of 0 milliseconds is used, basically no animation is done. Here is how to use ...


jQuery show effect example jQuery show effect example

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

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

References


2 comments :

  1. another effect please!
    I don't understand why the other effect (such as slide) is not working anymore. It just still swinging although I set it to slide. But, it's working well on my old website

    ReplyDelete
  2. Dear, I like your blog very much, I can get many useful information. Hope that we can communicate with each other. By the way, have you ever used memory card software ? Unfortunately I lost my memory card data. I do not know how to do.

    ReplyDelete