Question

我的代码存在问题，我无法弄清楚。我希望显示4个div每5秒更换一次，但不知怎的，我的功能每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/

Answer 1

将setTimeout延迟更改为5000而不是1000。设置超时也需要移到div数组之外，因为它是为div数组中的每个元素调用的。从而创建5秒间隔的恒定流并创建1秒效果。

以下是代码的工作版本：

    function fadeTheDivs(divs)
{

  setTimeout(function(){
    var divs = getRandomDivs();
    fadeTheDivs(divs);
  }, 5000);

  $(divs).fadeToggle("slow","", function(){

  });

}

http://jsfiddle.net/FyzXF/126/

Answer 2

以下是使用其他工具的解决方案，例如delay()和$(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); }) }没有setTimeOut。检查一下：

＆＃13;

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

＆＃13;

<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>

＆＃13;

x-xxx-xxx-xxxx

＆＃13;

我如何每5秒随机淡入/淡出一些div

2 个答案: