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.

$().animate({“style1″:”value1”, “style2″:”value2”}, Time);

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


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.


<div id="all"><br></br><div id="up">往上</div><br></br><div id="showTab"><br></br><br></br><div id="data"><br></br>About<br></br><br></br>This script is intended for forms where the user needs to upload an image to a Web site.<br></br><br></br>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.<br></br><br></br>live demo : http://hedgerwow.appspot.com/image-upload-preview/demo.html<br></br><br></br>download source : http://code.google.com/p/image-upload-preview/source/browse/#svn/trunk<br></br>Comments<br></br><br></br>http://code.google.com/p/image-upload-preview/wiki/CommentsWall<br></br>Screenshot<br></br><br></br></div><br></br><br></br></div><br></br><div id="down">往下</div><br></br></div><br></br>


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

jQuery CODE:

<script type="text/javascript"><br></br>$(document).ready(function(){<br></br> var divDataHeight = $('#showTab').height() +100;<br></br><br></br> $('#data').css('position','relative');<br></br> $('#showTab').css('position','relative');<br></br> $('#down').hover(function(){<br></br> $('#data').animate({top: 0}, 3000);<br></br> },<br></br> function(){<br></br> $('#data').stop();<br></br> });<br></br><br></br><br></br> $('#up').hover(function(){<br></br> $('#data').animate({top: -divDataHeight}, 3000);<br></br> },<br></br> function(){<br></br> $('#data').stop();<br></br> }<br></br> );<br></br><br></br><br></br>});<br></br><br></br><br></br></script><br></br>

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

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.


Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn