Step by step

This plugin provide a easy way to create animations with jQuery and using the central timer from jQuery you don’t overload your pages and get the best experience with animations, like this site ^^

Download it here: jQuery.Animator (2.38 KB) - 141 hits

How to use?

You only need one function that will be called always when the setup interval ends. See the example below:
I’ll play with the position of the #Walker, so here comes the animator:

 HTML | 
 copy code |
?
 
01
02
<div id="Walker" style="position:relative;left:0;width:100px;height:50px;background:#000;color:#fff">Animation Test</div>
03
<script language="JavaScript">
04
<!--
05
  function AnimateWalker(Walker, GoEnd){
06
    // Left Walk 1 by 1
07
    newLeft = parseInt(Walker.css("left")) + 1;
08
    // Check GoEnd is true to go to end of the animation
09
    if(GoEnd) newLeft = 400;
10
    Walker.css("left", newLeft);
11
    // if the setup left keep less then 400 we continue the animation
12
    return (newLeft < 400);
13
  }
14
 
15
  $(function(){
16
    $("#Walker").animator(10, AnimateWalker);
17
  });
18
//-->
19
</script>
20

See a article about jQuery.Animator

Thanks, bye.

This entry was posted on Friday, May 23rd, 2008 at 11:13 am and is filed under news. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.