php - 使多个随机 div 以不同的时间淡入和淡出

Question

我在使服务器端生成的代码（<php ?>） div 淡入淡出时遇到问题。

我查询一个数据库并返回我放在一个 div 中的六行。由于 mysql 查询中的 while 子句，通常 div 将重复六次。这里的问题是我希望六个 div 在不同的时间淡入和淡出。只要六个动态生成的 div 在不同时间随机淡入，哪个先淡入并不重要。

我知道这将是 jquery 或 javascript，我是新手。

Answer 1

就像是：

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
}

应该管用。那是未经测试的代码，您可能想要调整数字，但希望它能给您一个基本的想法。

Answer 2

您很可能需要使用一些不同的 Javascript 来完成听起来像您想要的...

如果您有六个元素，那么您可以使用该.random()函数来获取下一个要交换的元素...示例如下。

jQuery 有一些内置的方法来淡入/淡出元素...

在这里.fadeIn()

在这里.fadeOut()

您可以使用此处.doTimeout()演示的计时器。 这是一个 jQuery 插件。Javascript 确实有一个内置的计时器setInterval()，但是使用它.doTimeout()可以让你保持我喜欢的相同的 javascript 外观/感觉。