如何将DIV向后移动&第四个缓慢地覆盖背景

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

本文关键字：四个 缓慢 背景 覆盖 DIV amp 移动      更新时间：2023-09-26

好的，所以我要展示的完整示例不再在线，所以我必须尝试解释。

我想做的是将一个循环视频作为全屏背景，其顶部将是一个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，所以也许有人可以帮我弄清楚时间方面的问题。

谢谢！

animate函数中的第二个参数是动画的持续时间，它决定了动画的速度。现在是1000，也就是1000毫秒，或者1秒。把这个数字调大，使它移动得更慢。然而，setInterval会杀死你，它会停止它，并在2秒后再次调用它，所以这个数字需要更改为两个持续时间的总和。但是，这将是您需要等待动画开始的时间。看看这是怎么回事。如果希望动画在循环中永远继续，可以通过以下方式执行：http://jsfiddle.net/bypepLf9/1/

请记住，您正在制作两个单独的动画，一个在右边，另一个在左边，它们可以在完成时相互调用，因为最后一个参数是一个回调，在动画完成时将调用该回调。

以下是jQuery动画文档：http://api.jquery.com/animate/但是这也应该能够通过纯CSS来实现。

相关文章：