我要疯了，试图弄清楚这一点。
我有两个带有雨背景图像的 div，我用 jquery 对其进行了动画处理，从顶部：-100% 到顶部：100%。我希望 div 循环，所以视觉效果是连续的雨流下来。
我可以让动画循环播放，但它会等到整个循环完成后再开始，所以有一两秒钟你会看到动画结束。
我的解决方案是有两个相同的 div。第一个 div 将开始动画，然后当它达到 top:0% 时，我希望第二个 div 开始。当第二个 div 也达到 top:0% 时，第一个 div 需要循环，依此类推。
我可以创建一个变量来给出 div 位置的值，但首先它以像素为单位（我需要百分比），其次它只在准备好文档时给我一个数字（我需要它不断更新）
这是可以实现的吗？到目前为止，这是我的代码：
$(document).ready(function(){
//RAIN
function rain1() {
$("#rain1").animate({ top: '100%'}, 4000, 'linear', function() {
$(this).css("top", "-100%").delay(4000);
rain1();
});
}
function rain2() {
$("#rain2").delay(4000).animate({ top: '100%'}, 4000, 'linear', function() {
$(this).css("top", "-100%");
rain2();
});
}
$('a.control-rain').click(function(){
rain1();
rain2();
});
});