使多個隨機div淡入和淡出

我有一個問題，使服務器端生成代碼（<php ?>）div淡入淡出。使多個隨機div淡入和淡出

我查詢一個數據庫，並返回我放在一個div中的六行。正常情況下，由於mysql查詢中的while子句，div將被複制六次。這裏的問題是，我想讓六個div在不同的時間淡入淡出。只要六個動態生成的div在不同的時間隨機淡入，首先淡入哪個並不重要。

我知道這將是jquery或JavaScript，我是一個新人。

來源

2012-07-21 jcobhams

這將要求CSS3和JavaScript。看看css3的alpha屬性（rgba）。 – retrohacker 2012-07-21 18:35:26

請詳細解釋... @ Crackers – jcobhams 2012-07-21 18:37:32

@Crackers他應該能夠用簡單的jquery'.fadeIn（）'和'.fadeOut（）'完成他所描述的內容。通過任何方式，我不是說CSS3是一件壞事。只是說，jQuery應該能夠自己完成這一點。 – Jared 2012-07-21 18:38:25

喜歡的東西：

function fadeRandom($divI) { // make a function we can re-use 
    window.setTimeout(function() { // do this next stuff after a short break 
     $divI.fadeIn(100, function(){ // fade $divI in, then ... 
      $divI.fadeOut(100, function() { // fade $divI out, then ... 
       fadeRandom($divI); // start the whole cycle over 
      } 
     }, Math.random(100) * 100); // do that after 1-100ms 
    }); 
} 
for (var i = 0; i++; i < 6) { // go through all 6 divs and ... 
    fadeRandom($('#div_' + i)); // get the fade cycle started 
}

應該工作。這是未經測試的代碼，你可能想調整數字，但希望它給你一個基本的想法。

來源

2012-07-21 18:42:04 machineghost

只是fyi檢查你的大括號你有一個非偶數的開/關括號 – Jared 2012-07-21 18:48:17

謝謝，我已經糾正它。 – machineghost 2012-07-21 19:55:58

你很可能需要使用幾個不同的部分JavaScript來實現這聽起來像你是想......

如果你有六個要素，那麼你可以使用.random()函數來獲取下一個元素交換...的本實施例中是HERE.

jQuery的有內建的方法，以在/淡入淡出的元素...

HERE for .fadeIn()

HERE for .fadeOut()

對於計時器，您可以使用.doTimeout()這是演示HERE.這是一個jQuery插件。 Javascript確實有一個內置的計時器setInterval()，但使用.doTimeout()將允許您保持我傾向於喜歡的相同的javascript外觀/感覺。

來源

2012-07-21 18:42:50 Jared

使多個隨機div淡入和淡出

回答

相關問題