选择一个随机的 div 并应用 css class 超时并循环这个？

Question

我有以下 HTML 结构：

<div class="change me">Item 1</div>
<div class="change me">Item 2</div>
<div class="change me">Item 3</div>
<div class="change me">Item 4</div>
<div class="change me">Item 5</div>
<div class="change me">Item 6</div>

和CSS：

body { 
    font-family: Helvetica, Arial, sans-serif; 
    font-size:20px;
}
div { 
    background-color: #fff; 
    display: block; 
    border-bottom: 1px solid #ccc;
    background-image: url(http://cdn.sstatic.net/Img/mini-hero-bg.png?v=7f269bbbdb22); 
}
.change { 
    background-image: none;     
}

现在我想用 Javascript / jQuery 和 "remove" 和 class "change" 随机拍摄一张 div 以便特定 div 的默认背景图片将可见。我的代码看起来像 atm:

var divs = $(".me").toArray();
var divlength = divs.length;

setInterval(function(){    
    var randomnum = Math.floor(Math.random()*divlength);
    var randomdiv = divs[randomnum];  
    $(randomdiv).addTemporaryClass("change", 1000);    
}, 1000);

$.fn.extend({     
    addTemporaryClass: function(className, duration) {        
        var elements = this;      
        setTimeout(function() {
            elements.addClass(className);
        }, duration);
        return this.each(function() {
            $(this).removeClass(className);
        });       
    }
});

我需要对此进行改进以实现以下目标：

我希望从无背景图像到默认背景图像的可见性有更平滑的变化。一些褪色效果或类似的东西。已经尝试向 div CSS 添加一些过渡，但没有成功。
有时没有 "change"-class 删除，并且有一段时间没有任何 div 的背景图像可见，但我需要至少每次都能看到一张图像
我需要在页面加载时立即启动 "remove"-class-东西，这样已经有一个随机 div 可见的背景图像

这里是当前的fiddle: http://jsfiddle.net/uRd6N/500/

谢谢你的帮助，我是菜鸟，对 JS 不是很熟悉/jQuery。如果你知道做这件事的更好方法，你也可以告诉我。

此致

Answer 1

我看过了，并在 http://jsfiddle.net/uRd6N/513/

更新了你的 Fiddle

我做了一些改动：

var randomnum = Math.floor(Math.random()*(divlength-1));

记住，数组索引从 0 开始，而不是 1，因此我将随机数减 1，否则永远不会到达数组中的最后一个 div。

var divs = $(".me").toArray();
var divlength = divs.length;

我在 setInterval 函数的范围之外声明了这两个变量，以进一步优化代码。

clearTimeout(doChange);
   var doChange = setTimeout(function() {
   elements.addClass(className);
}, duration);

我将 setTimeout 分配给一个变量，并在每次调用该函数时将其清除，以避免冒泡。

我仍在研究过渡，但我发现的另一个问题是没有控制机制来确保上次选择的随机数不会在下一次选择时再次出现。这需要加以控制。

更新 1

我在加载时首先添加了带有背景图像的随机 div，然后在第一个时间间隔内将其删除。

更新二（重复随机数控制）

好吧，我已经设法拼凑出一些非常简单的逻辑来检查所选择的随机数是否是上次选择的数字的重复出现，并将随机数递减或递增 1，但始终在范围内div 计数，所以它是安全的。它既不聪明也不复杂，只是简单的程序代码。我添加了控制台日志，打开您的控制台并查看它的运行情况。代码如下：

    console.log("Chosen number is "+randomnum);
    if(randomnum == lastnum){
        console.log("We have a duplicate ("+randomnum+")");
        if( (randomnum-1) >= 0 ){
            randomnum = (randomnum-1);
            console.log("Duplicate solved, it is now "+randomnum);
        }else if( (randomnum+1) <= (divlength) ){
            randomnum = (randomnum+1);
            console.log("Duplicate solved, it is now "+randomnum);
        }
    }
    lastnum = randomnum;

在 url 查看最终更新的 fiddle：http://jsfiddle.net/uRd6N/537/

编码愉快！

选择一个随机的 div 并应用 css class 超时并循环这个？

Choose a random div and apply css class with timeout and loop this?

javascript

jquery

addclass

settimeout

removeclass