jQuery, animate function with css exlapenation.

Today, I want to use jQuery making a animation for webpage, First I check animate fuction on ref book. I clearly know how use it, there are two main function for animate.

1.
$().animate({"style1":"value1", "style2":"value2"}, Time);

Time: it can be three type, String => "slow", "fast", "normal". Integer=>10000

2.
$().stop();

it can immedaitely stop animation.

Let's do some experieces, I bulit a simple page. You can hover UP and DOWN for a article sliding UP or DOWN. Les't do it.

HTML CODE:

<div id="all">
<div id="up">往上</div>
<div id="showTab">

<div id="data">
About

This script is intended for forms where the user needs to upload an image to a Web site.

The image is displayed on the page for previewing before uploading. The display will be resized if needed so as not to break the page layout. Valid file types are set in the script; others will be disallowed.

live demo : http://hedgerwow.appspot.com/image-upload-preview/demo.html

download source : http://code.google.com/p/image-upload-preview/source/browse/#svn/trunk
Comments

http://code.google.com/p/image-upload-preview/wiki/CommentsWall
Screenshot

</div>

</div>
<div id="down">往下</div>
</div>

CSS CODE:

<style type="text/css">
<!--
#showTab {
 height: 150px;
 width: 250px;
 overflow:hidden;
 position:relative;
}
#showTab #data{
 position:relative;
}
#up, #down{
 height:20px;
 border:1px #00CC33 solid;
 text-align:center;
 background:#999999;
}
#all{
 background:#FFFFFF;
 border:1px #660066 solid;
 overflow:hidden;
}
-->
</style>

jQuery CODE:

<script type="text/javascript">
$(document).ready(function(){
  var divDataHeight = $('#showTab').height() +100;

  $('#data').css('position','relative');
  $('#showTab').css('position','relative');
  $('#down').hover(function(){
          $('#data').animate({top: 0}, 3000);
  },
      function(){
          $('#data').stop();
      });


  $('#up').hover(function(){
              $('#data').animate({top: -divDataHeight}, 3000);
  },
      function(){
          $('#data').stop();
      }
  );


});


</script>

It is done. You can post these codes on your webpage, of course before you excute have to load jQeury.js .

NOTE:
if you want animate your div, your div layer css style have to set "position:relative".
You can try more effects by yourself, example "opacity", "height"....
If you have anything new about animate, please let me know. Thank you for yor reading.