使多个随机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淡入和淡出

回答

相关问题