jQuery: jQuery.Animator « GSaraiva's Projects

23
May 08

jQuery: jQuery.Animator

:: articles :: by Gilberto Saraiva

Folks,

I wrote a plugin to make our life easy! the new jQuery.Animator.

the example:

 HTML |   copy code | ?  
01 
02 <html>
03 <head>
04 <title></title>
05 <script type="text/javascript" src="jquery-1.2.5.js"></script>
06 <script type="text/javascript" src="jquery.animator.js"></script>
07 <script language="JavaScript">
08 <!--
09   function AnimateWalker(Walker, GoEnd){
10     newLeft = parseInt(Walker.css("left")) + 5;
11     if(GoEnd) newLeft = 400;
12     Walker.css("left", newLeft);
13     return (newLeft < 400);
14   }
15  
16   function AnimateWalker3(Walker, GoEnd){
17     // GoEnd can't be calculated, it's a infinite animation
18     newLeft = parseInt(Walker.css("left")) + 10;
19     if(newLeft > 400) newLeft = 0;
20     Walker.css("left", newLeft);
21     return true; // infinte
22   }
23  
24   $(function(){
25     $("#Walker").animator(10, AnimateWalker);
26     $("#Walker2").animator(10, AnimateWalker);
27     $("#Walker3").animator(10, AnimateWalker3);
28   });
29 //-->
30 </script>
31 <body>
32 <div id="Walker" style="position:relative;left:0;width:100px;height:50px;background:#000;color:#fff">Animation Test</div>
33 <div id="Walker2" style="position:relative;left:50;width:100px;height:50px;background:#0F0;color:#fff">Animation Test</div>
34 <div id="Walker3" style="position:relative;left:100;width:100px;height:50px;background:#00F;color:#fff">Animation Test</div>
35 </body>
36 </html>
37

The effect will be like this:

Animation Test

Crazzy uhm?!

jQuery.Animator plugin page

Hugs for all

Tags: animate, jQuery, jQuery.Animator

This entry was posted on Friday, May 23rd, 2008 at 8:04 am and is filed under articles. 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.

articles — 6 comments

6 comments

Dan

May 27, 2008 at 11:39 am

Hey this is just what I’ve been looking for. I’m kinda new to Jscript though, how do you get the clouds to go past the screen and not create a scroll bar?

Gilberto Saraiva

May 27, 2008 at 4:50 pm

Hi Dan, first of all thanks for the comment.

jQuery.CssRule is to get background moving by a CSS property, background-position.

See on the source code from here:

 Javascript |   copy code | ?  
1 jQuery.cssRule(".Wave", "backgroundPosition", WaveAt + "px 100%");

WaveAt is a variable that hold the increase.

iTom+

September 22, 2008 at 5:21 pm

Oh great!!! i find all around about this. Thank you very much.
Dean

November 14, 2008 at 1:01 am

Great script, except I can’t get it to work…

I copied the source code above along with the js file, and attached jquery-1.2.6.js.

When I load it in the browser, I get a weird error: “\xC2 is not defined”

Any ideas?
Callan

August 14, 2009 at 9:14 am

Cool, even the demo doesn’t work!
Gilberto Saraiva

August 14, 2009 at 4:17 pm

Sorry, the link for animator was broken.

Step by step

jQuery: jQuery.Animator

6 comments

Leave a comment

Pages

Last Comments

Meta

01
02	<html>
03	<head>
04	<title></title>
05	<script type="text/javascript" src="jquery-1.2.5.js"></script>
06	<script type="text/javascript" src="jquery.animator.js"></script>
07	<script language="JavaScript">
08	<!--
09	function AnimateWalker(Walker, GoEnd){
10	newLeft = parseInt(Walker.css("left")) + 5;
11	if(GoEnd) newLeft = 400;
12	Walker.css("left", newLeft);
13	return (newLeft < 400);
14	}
15
16	function AnimateWalker3(Walker, GoEnd){
17	// GoEnd can't be calculated, it's a infinite animation
18	newLeft = parseInt(Walker.css("left")) + 10;
19	if(newLeft > 400) newLeft = 0;
20	Walker.css("left", newLeft);
21	return true; // infinte
22	}
23
24	$(function(){
25	$("#Walker").animator(10, AnimateWalker);
26	$("#Walker2").animator(10, AnimateWalker);
27	$("#Walker3").animator(10, AnimateWalker3);
28	});
29	//-->
30	</script>
31	<body>
32	<div id="Walker" style="position:relative;left:0;width:100px;height:50px;background:#000;color:#fff">Animation Test</div>
33	<div id="Walker2" style="position:relative;left:50;width:100px;height:50px;background:#0F0;color:#fff">Animation Test</div>
34	<div id="Walker3" style="position:relative;left:100;width:100px;height:50px;background:#00F;color:#fff">Animation Test</div>
35	</body>
36	</html>
37