javascript - 我如何每5秒随机淡入/淡出多个div

我的代码有问题，无法解决。我想显示每5秒更改一次的4个div，但是我的函数不会每5秒更改一次，而是每1秒左右更改一次。

HTML代码：

<div class="Image"><img src="image1.jpg">1</div>
<div class="Image"><img src="image2.jpg">2</div>
<div class="Image"><img src="image3.jpg">3</div>
<div class="Image"><img src="image4.jpg">4</div>
<div class="Image"><img src="image5.jpg">5</div>
<div class="Image"><img src="image6.jpg">6</div>
<div class="Image"><img src="image7.jpg">7</div>

CSS代码：

div.Image {
display: none;
}

jQuery代码：

$(document).ready(function(){
var divs = getRandomDivs();

    fadeTheDivs(divs);
});

function getRandomDivs()
{
    return $("div.Image").get().sort(function(){
    return Math.round(Math.random())-0.5; //random so we get the right +/- combo
    }).slice(0,4);
}

function fadeTheDivs(divs)
{
setTimeout(function(){
  $(divs).fadeToggle("slow","", function(){
    var divs = getRandomDivs();

    fadeTheDivs(divs);

  });
}, 5000);

有人可以帮帮我吗？
JSFiddle：http://jsfiddle.net/FyzXF/113/

最佳答案

这是使用其他工具（例如promise()和delay() no setTimeOut）的解决方案。检查一下：

$(document).ready(function(){
  var divs = getRandomDivs();
  fadeTheDivs(divs);
});

function getRandomDivs()
{
  return $("div.Image").get().sort(function(){
    return Math.round(Math.random())-0.5;
  }).slice(0,4);
}

function fadeTheDivs(divs)
{
  $(divs).fadeIn('slow').delay(3000).fadeOut('slow').promise().done(function(){
   	var divs = getRandomDivs();
  	fadeTheDivs(divs);
  })
}

div.Image {
  display: none;
  width:50px;
  height:50px;
  background:tomato;
  margin:2px;
  color:white;
  line-height:50px;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Image">1</div>
<div class="Image">2</div>
<div class="Image">3</div>
<div class="Image">4</div>
<div class="Image">5</div>
<div class="Image">6</div>
<div class="Image">7</div>