javascript - 如何在背景上缓慢地前后移动 DIV？

Question

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

我想要做的是将一个循环视频作为全屏背景，其上方将是一个 DIV，其中包含一个在屏幕上连续缓慢来回移动的视频。

这是动画部分的示例，但它太快了:

fiddle sample

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 函数中的第二个参数是动画的持续时间，它决定了动画的运行速度。现在它是 1000，也就是 1000 毫秒，或 1 秒。使该数字更大以使其移动得更慢。但是，setInterval 会杀了你，它会停止它并在 2 秒后再次调用它，因此需要将该数字更改为两个持续时间的总和。但是，这将是您等待动画开始的时间。 See how that is working here.如果你想让动画一直循环下去，你可以这样做: http://jsfiddle.net/bypepLf9/1/

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

这里是 jQuery 动画文档:http://api.jquery.com/animate/但这也应该能够通过纯 CSS 来完成。