Javascript 屏幕上不断重复的动画

我试图创造一种气泡慢慢上升到屏幕顶部的效果，我现在看到的是这个，

（不知道为什么它不起作用，但你可以了解我目前计划解决这个问题的方法。）

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

另外，作为一个简短的附带问题，是否最好通过jQuery设置动画，将其封装在函数中，并不断使用setInterval调用它？

jQuery的animate

用于指定动画完成时将调用的回调函数

设置重置气泡位置的回调，并将该回调指定为animate的complete参数

您还需要回调函数重新调用animate来重新启动动画（不需要setInterval）

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

添加任意多个气泡，为每个气泡调用animatejquery方法

---

顺便说一句：JSFIDLE不起作用，因为您没有指定加载jquery

好吧，这听起来不错，但是如果有多个计时和速度不同的气泡，我应该为每个气泡制作一个动画和函数循环吗？您能提供一个JSFIDLE吗？我真的不明白。谢谢你的回答。复制，或者这似乎不是关于制作“无限”动画；它是关于重用屏幕外的动画元素，或者将它们移回底部。投票决定不开放。

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

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