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

你可以这样做：

function fadeRandomly() {
   // fade both out at first
   $('#one').fadeOut(/* duration */); 
   $('#two').fadeOut(/* duration */); 
   if (Math.random() > 0.5) {
      $('#one').fadeIn(/* duration */);
   } else {
      $('#two').fadeIn(/* duration */); 
   }
}

setInterval(fadeRandomly, /* duration between animations */);

Answer 2

为divs提供.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

Answer 3

这应该有效：

var rnd = Math.floor(Math.random() * 2) + 1;//outputs either 1 or 2

if (rnd == 1) {
  $('#one').fadeIn(500).delay(500).fadeOut(500);
} else {
  $('#two').fadeIn(500).delay(500).fadeOut(500);
}

希望这有帮助！

Answer 4

类似的东西：我添加了一个函数，万一你有更多的div来处理你，你想扩大你的衰落范围。

var a = ['one', 'two']; // the name of your divs
function fadeRandomDiv(min, max) {
  var divtofade =  a[Math.floor(Math.random() * (max - min + 1) + min)];
   // delay 4 seconds, then fade out
  jQuery( "#" + divtofade ).fadeIn( "slow" ).delay(4000).fadeOut("slow");
}

fadeRandomDiv(1, a.length - 1)

如果你想要反复调用它。

  // every 3 seconds call the function
   setInterval(function(){
       fadeRandomDiv(1, a.length - 1);
    }, 3000);

使用jQuery随机淡入div

4 个答案: