私はこれを理解しようと頑張っています。
上：-100％から上：100％に移動するためにjqueryでアニメーション化した雨の背景画像を持つ2つのdivがあります。divをループさせて、視覚効果として雨の連続的な流れが降りてくるようにします。
アニメーションをループさせることはできますが、完全なサイクルが完了するまで待機してから再開するため、アニメーションが終了するまで1〜2秒かかります。
私の解決策は、2つの同一のdivを持つことでした。最初のdivはアニメーションを開始し、それがtop：0％に達したときに、2番目のdivを開始します。次に、2番目のdivもtop：0％に達したときに、最初のdivをループする必要があります。
div位置の値を与える変数を作成できますが、最初はピクセル単位で（パーセントが必要）、次にドキュメントの準備ができたら1回だけ数値を返します（継続的に更新する必要があります）
これは達成可能ですか？これまでの私のコードは次のとおりです。
$(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();
});
});