循環jquery動畫

我正在努力弄清楚這一點。循環jquery動畫

我有兩個div與背景圖像的雨，我用jquery動畫從頂部：-100％頂部：100％。我想divs循環，所以視覺效果是連續的雨水流下來。

我可以讓動畫循環，但它會一直等到整個循環完成，直到它再次開始，所以有一秒鐘或兩秒鐘的時間你會看到動畫結束。

我的解決方案是有兩個相同的div。第一個div將開始動畫，然後當它達到頂部時：0％，我想第二個div開始。第一個div隨後需要在第二個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(); 
     }); 
    });

來源

2012-09-30 Coop

我沒有做什麼比在您的代碼iso -100％重置頂部0％。我不確定這是你想要的。

工作在這裏撥弄：http://jsfiddle.net/ZHSKj/1/

來源

2012-09-30 16:59:01

沒有抱歉，這不是我所問的。我的問題在你的小提琴中是一樣的。對不起，我應該解釋說，我的雨水圖形的div具有100％的高度。這就是爲什麼它們都以-100％的高度開始，所以它們出現在屏幕外。當第一個div達到0％的高度時，它將填滿屏幕，然後需要觸發第二個div，以避免如果你只是自己打開第一個div而得到的100％的差距。 – Coop

你能否把你的html添加到問題中？我很想調試它，即使我不是在CSS的親。 –

循環jquery動畫

回答

相關問題