How to Move a DIV Back & Forth SLOWLY Overtop a Background?

Question

Ok, so the full example I was going to show is no longer online so I will have to try to explain.

What I'm trying to do is have a looping video as the full-screen background, and overtop of that will be a DIV containing a video that continuously moves SLOWLY back and forth across the screen.

Here's an example of the animation portion, yet it's too fast:

fiddle sample

HTML CODE

<div style='position:absolute; background-color: blue; height: 50px; width:50px;'></div>

JS CODE

setInterval(function(){
    $("div").stop(true,true).animate({left: 300}, 10000, 
          function(){ $(this).stop(true,true).animate({left: 0}, 1000); 
    });
}, 20000);

I'm not very good with javascript so maybe someone can just help me figure out the timing aspect.

Thank you!

Answer 1

The second argument in the animate function is the duration of the animation, that determines how fast it will go. Right now it is 1000, which is 1000 milliseconds, or 1 second. Make that number bigger to make it move more slowly. However, the setInterval is going to kill you, it is going to stop it and call it again after 2 seconds, so that number needs to be changed to the total of both durations. However, that will be how long you will have to wait for the animation to begin. See how that is working here. If you want the animation to continue forever in a loop, you can do it this way: http://jsfiddle.net/bypepLf9/1/

Keep in mind you are doing two separate animations, one to the right and another to the left, and they can call each other when they complete because the final argument is a callback that will be called when the animation is done.

Here are the jQuery animate docs: http://api.jquery.com/animate/ but this should also be able to be accomplished through pure CSS.