continuous movement animation with jquery

Question

continuous movement

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

Answer 1

Here's an example of the following code.

This is relatively simple with jQuery using the position:absolute CSS property and the .animation()^[DOCS] method callback. You will basically be animating the left CSS property over a period of time within a named function, then call that function in the animation callback when the animation is complete, like so:

var animateTruck = function () {

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

animateTruck();

Answer 2

How could you do this, yet have the content box slowly move back and forth across the width of the screen (not going through the screen and starting back at the other side)?

Answer 3

If you have a div with a picture inside, like this:

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

Here is an jQuery example to slide the picture over the div/screen:

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

moveTruck();

Hope that works out...

Answer 4

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

More on jQuery animate: http://api.jquery.com/animate/

Demonstration shows 2 boxes animated across the screen at different speeds etc. (See fiddle)

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);