Move a div back and forth across page

Question

I'm trying to get a div to move from one end of the screen to the other on a loop. My javascript currently only attempts to move the div left but doesn't work.

    var func = function() {
       $("#bob").animate({"left": "-40px"}, 1000, function() { 
          $(this).animate({"left": "40px"}, 1000) 
       })

        setTimeout(func, 2000);
    }

Here is my jsfiddle:

http://jsfiddle.net/zsal/N48Eg/1/

Answer 1

Name your functions, and then use one as the completion callback in the other:

function goLeft() {
    $('#bob').animate({'left': '-40px'}, 1000, goRight);
}

function goRight() {
    $('#bob').animate({'left': '40px'}, 1000, goLeft);
}

goLeft();

So, when it's done going left, it should go right. When it's done going right, it should go left.

Disclaimer: Untested

PS You're missing jQuery in your Fiddle.

Answer 2

Your current fiddle doesn't work because you didn't include jQuery (from the Frameworks & Extensions drop-down on the left) and because you define the func() function but never actually call it. Fix those two things and it will work as shown here: http://jsfiddle.net/N48Eg/8/

Note, however, that your animation code is more complicated than it needs to be. Multiple animations on the same element will be queued automatically by jQuery, so you don't need to use a callback on the first one to start the second. And you can supply func as the callback on the second and avoid the setTimeout() completely:

var func = function() {
    $("#bob").animate({"left": "-40px"}, 1000)
             .animate({"left": "40px"}, 1000, func);
}

func();

Demo: http://jsfiddle.net/N48Eg/18/

Answer 3

You just haven't called your function...

var func = function() {
    $("#bob").animate({"left": "-40px"}, 1000, function() { 
        $(this).animate({"left": "40px"}, 1000) 
    })
 setTimeout(func, 2000); // added back
}
func();

Your updated fiddle

Answer 4

First of, if you want the motion to continue, you need to use setInterval instead of setTimeout

Also you need to either move the setInterval out of the scope of func , or call func to start the animation

Answer 5

lots of problems. Heres a fiddle with a solution.

you also forgot to position:relative your absolutely positioned elements container.

JSFIDDLE

you weren't calling your function for starters

i made a new one called moveBob()

Answer 6

Here's the pure CSS version. http://jsfiddle.net/zDSRd/

#bob
{
    position:absolute;

    animation: fly 2s linear 0s alternate infinite;
    -webkit-animation: fly 2s linear 0s alternate infinite;
    -moz-animation: fly 2s linear 0s alternate infinite;
    -o-animation: fly 2s linear 0s alternate infinite;
    -ms-animation: fly 2s linear 0s alternate infinite;
}
@keyframes fly {
    from { transform: translateX(0px); }
    to { transform: translateX(500px); }
}
@-webkit-keyframes fly {
    from { -webkit-transform: translateX(0px); }
    to { -webkit-transform: translateX(500px); }
}
@-moz-keyframes fly {
    from { -moz-transform: translateX(0px); }
    to { -moz-transform: translateX(500px); }
}
@-o-keyframes fly {
    from { -o-transform: translateX(0px); }
    to { -o-transform: translateX(500px); }
}
@-ms-keyframes fly {
    from { -ms-transform: translateX(0px); }
    to { -ms-transform: translateX(500px); }
}