如何緩慢地將DIV前后移動到背景上方？

Question

好的，所以我要顯示的完整示例不再在線，因此我將不得不嘗試進行解釋。

我正在嘗試做的是將循環視頻作為全屏背景，而最上面的將是一個DIV，其中包含一個視頻，該視頻連續緩慢地在屏幕上來回移動。

這是動畫部分的示例，但是太快了：

小提琴樣本

HTML代碼

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

JS代碼

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

我對javascript不太滿意，所以也許有人可以幫我弄清楚時序方面。

謝謝！

Answer 1

animate功能中的第二個參數是animate的持續時間，它確定動畫進行的速度。 現在是1000，即1000毫秒，即1秒。 增大該數字可使其移動得更慢。 但是，setInterval將會殺死您，它將停止它，並在2秒后再次調用它，因此該數字需要更改為兩個持續時間的總和。 但是，那將是您必須等待動畫開始多長時間。 看看這里的運作方式。 如果您希望動畫永遠循環下去，則可以這樣進行： http : //jsfiddle.net/bypepLf9/1/

請記住，您正在制作兩個單獨的動畫，一個在右邊，另一個在左邊，並且它們可以在完成時相互調用，因為最后一個參數是在完成動畫時將被調用的回調。

這是jQuery的animate文檔： http : //api.jquery.com/animate/，但這也應該能夠通過純CSS完成。