javascript - 使用 jQuery 在 div 中随机淡入淡出

Question

非常感谢这里的任何帮助。我想使用 jQuery 来解决以下...

有两个div。我想随机淡入其中一个 div(绿色或红色)，等待几秒钟，然后淡入淡出。然后随机淡入另一个。我试过使用 math.random(); 但我似乎无法让它正常工作。

所以基本上它会选择红色或绿色 div.. 在几秒钟后逐渐消失，随机选择红色或绿色 div... 然后在几秒钟后逐渐消失。它只是不断重复。

html:

<div id="one">This is the first block</div>
<div id="two">This is the second block</div>

CSS:

#one { 
    background: red;
    width:300px; 
    height:100px; 
}
#two { 
    background: green;
    width:300px; 
    height:100px; 
}

Answer 1

为两个 div 指定一个类名，例如 .fade 以便于管理。

然后你可以这样做:

(function randomFade() {
    var fadeDivs = $('.fade'),
        el = fadeDivs.eq(Math.floor(Math.random() * fadeDivs.length));        
    el.fadeIn('1000').delay(2000).fadeOut('1000',randomFade);   
})();

Fiddle Demo