Continuous motion animation with jquery

Question

continuous movement

I would like to recreate the moments of the truck on the above site. This is done in mootools. How do I code this, is there a jQuery plugin for this?

Animate the object from beginning to end of the screen, and then it starts again. How will I do this jQuery

Any help would be appreciated

Answer 1

Here's a JSFiddle example http://www.jsfiddle.net/XpAjZ/

More about jQuery animation: http://api.jquery.com/animate/

The demonstration shows 2 windows animated on the screen at different speeds, etc. (see violin)

Relevant jQuery code:

var animateMe = function(targetElement, speed){ $(targetElement).css({left:'-200px'}); $(targetElement).animate( { 'left': $(document).width() + 200 }, { duration: speed, complete: function(){ animateMe(this, speed); } } ); }; animateMe($('#object1'), 5000); animateMe($('#object2'), 3000); 

Answer 2

Here is an example of the following code.

This is relatively simple with jQuery using the CSS position:absolute .animation() and the .animation() ^[DOCS] callback method. Basically, you will animate the CSS left property for a certain period of time in a named function, and then call this function in the animation callback when the animation finishes:

 var animateTruck = function () { $('#truck').css('left','-50px') .animate({'left':$(window).width()}, 4000, 'linear', function(){ animateTruck(); }); }; animateTruck(); 

Answer 3

If you have a div with an image inside, like this:

 <div style="width: 1000px"> <img src="truck.png" id="truck" style="margin-left: -100px" /> </div> 

Here is a jQuery example for moving an image across a div / screen:

 function moveTruck(){ $('#truck').animate( {'margin-left': '1000px'}, 3000, // Animation-duration function(){ $('#truck').css('margin-left','-100px'); moveTruck(); }); } moveTruck(); 

Hope it works out ...

Answer 4

How could you do this, but the contents of the content window slowly move back and forth across the width of the screen (does not go through the screen and does not return to the other side)?