CODEWITHSUNDEEP
javascriptjqueryjquery-animate
nokiko
nokiko

Reputation: 491

continuous movement animation with jquery

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?

So animate an object from beginning to end of screen and then it starts over again. How would I do this jQuery

Any help will e appreciated

Upvotes: 4

Views: 23905

Answers (4)

John
John

Reputation: 1

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

Upvotes: 0

Christian
Christian

Reputation: 925

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...

Upvotes: 0

Jason Benson
Jason Benson

Reputation: 3399

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

Upvotes: 18

mVChr
mVChr

Reputation: 50185

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

Upvotes: 2

Related Questions