循环jquery动画

我想弄清楚这件事，快发疯了

我有两个div，有一个rain的背景图像，我用jquery设置了动画，从顶部开始：-100%到顶部：100%。 我希望divs循环，这样的视觉效果是连续不断的雨落下

我可以让动画循环，但它会一直等到整个循环完成，直到它再次开始，因此有一两秒钟的时间可以看到动画结束

我的解决方案是有两个相同的div。第一个div将开始动画，然后当它达到顶部：0%时，我希望第二个div开始。然后，当第二个div也达到top时，第一个div需要循环：0%，依此类推

我可以创建一个变量来给出div位置的值，但首先它是以像素为单位的（我需要百分比），其次它只在doc就绪时给我一次数字（我需要它不断更新）

这是可以实现的吗？以下是我目前的代码：

$(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();
        });
    });

---

我所做的只是将代码iso-100%中的顶部重置为0%。我不确定这是否是你想要的

---

在这里拉小提琴：

不，对不起，我不是这么问的。我的问题和你的一样。对不起，我应该解释一下，我的雨伞有100%的高度。这就是为什么它们都以-100%高度开始，所以它们出现在屏幕外。当第一个div达到0%高度时，它将填充屏幕，然后需要触发第二个div，以避免如果您自己循环第一个div，则会出现100%的间隙。您是否也可以将html添加到问题中？我很想调试它，即使我不是css专家。