屏幕上不断重复的动画

Question

我正在尝试创建一个缓慢上升到屏幕顶部的气泡效果，我现在拥有的是这个，

http://jsfiddle.net/PMF7k/

（不知道为什么它不起作用，但是你得到了我目前正在计划解决这个问题的方式。）

function bubbles() {
$(".bubble").animate({
    'background': "rgba(0,0,0,0.4)",
        'top': '-300px'
}, 200);
}

bubbles();
setInterval(function () {
bubbles();
}, 200);

我的问题是，是否有一种有效的方法可以重复使用屏幕上的元素？例如，当浏览器窗口无法查看气泡A时，它会到达底部并再次重复其循环？

另外作为一个简短的问题，最好是通过jQuery动画，将它包装在一个函数中并不断使用setInterval调用它吗？

Answer 1

jquery的动画

http://api.jquery.com/animate/

允许您指定将在动画完成时调用的回调函数。

设置一个重置气泡位置的回调，并将该回调指定为动画的完整参数

您还希望回调重新调用动画以重新启动动画（您不需要setInterval）。

可选地，初始位置（x和y），速度，颜色等可以随机改变。

根据需要添加许多气泡，为每个气泡调用动画 jquery方法。

btw：jsfiddle无法正常工作，因为你没有指定加载jquery