1

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

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 不断调用它？

4

1 回答 1

0

jquery的动画

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

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

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

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

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

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

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

于 2013-02-24T20:08:31.350 回答