javascript - 屏幕上不断重复的动画

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/

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

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

您还需要回调来重新调用 animate 以重新启动动画(不需要 setInterval)。

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

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

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