Search code examples
jqueryjquery-animateimagemotion

JQuery : simulate player moving on the field

I'm trying to simulate a player moving on the field (e.g. div element in this case, being the player an img element). How do I go about making the img move smoothly in the beginning, progressively speeding up until it reached the "top speed" and continue to do it unless the end of the route is near enough to do the 2 initial steps again but backwards to simulate the stopping.

Cheers!

Solution

  • http://jsfiddle.net/aPNKQ/

    html

     <div>Help</div>

    jq

    $(function (){
    $('div').animate({left: '100px'},5000);
    setTimeout(function (){
        $('div').stop(false,false).animate({left: '100px'},2000);
    },1000);
})

    CSS

    div{background: red; float: left;position: absolute; left: 0;}

    with alittle imagination you could make the speed 5000,4000, dynamic etc... there you go :)