.show和.hide每个<div>

时间:2018-05-09 06:31:47

标签: jquery html5 settimeout

$("div.item").hide(); 
var i=0;
function transition() {

    $("div.item").eq(i).show();

    setTimeout(function() { $("div.item").eq(i).hide() }, 2000);
    i++;            
}

setInterval(transition, 2000);

我希望我的代码在加载时隐藏每个div元素,然后再显示每个div元素(在彼此之后),持续2000ms再次隐藏它。

目前div已经显示在彼此之后但没有再次隐藏 - 它们排成一行。

2 个答案:

答案 0 :(得分:2)

这是您需要的,而无需更改代码。 请说明是否还需要其他东西。

&#13;
&#13;
$("div.item").hide();
var i = 0;

function transition() {
$("div.item").eq(i).show(); {
    $("div.item").eq(i - 1).hide()
}
i++;
}
setInterval(transition, 2000);
&#13;
.item {
     height: 50px;
     width: 50px;
     position: absolute;
     border: 1px solid blue;
     text-align: center;
     left: 0;
     top:0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" style="background-color: red;">1</div>
<div class="item" style="background-color: cyan;">2</div>
<div class="item" style="background-color: yellow;">3</div>
<div class="item" style="background-color: green;">4</div>
<div class="item" style="background-color: pink;">5</div>
<div class="item" style="background-color: gray;">6</div>
<div class="item" style="background-color: lightgreen;">7</div>
<div class="item" style="background-color: skyblue;">8</div>
<div class="item" style="background-color: brown;">9</div>
<div class="item" style="background-color: bisque;">10</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

让我们看看你的代码在做什么(或多或少......)

// hide all items
$("div.item").hide(); 
// setup a global var
var i=0;


function transition() {
    // on first loop show item 0
    $("div.item").eq(i).show();

    // do some code _later_
    setTimeout(function() { _later_ }, 2000);

    // point to the next item
    i++;    
}

// repeat the above
setInterval(transition, 2000);

可以细分为:

  • i = 0
  • show 0
  • i = 1
  • 等待2s
  • hide 1
  • show 1
  • i = 2

setTimeout在setInterval启动之前运行

您可以通过保留i

的副本来解决此问题

&#13;
&#13;
$("div").hide();
var i = 0;


function transition() {
  $("div").eq(i).show();

  // take a local copy of i so that when i changes below, j keeps the old value
  let j = i;
  setTimeout(function() {
    $("div").eq(j).hide()
  }, 200);

  i++;
  if (i>=$("div").length-1) i = 0;
}

setInterval(transition, 200);
&#13;
div {
  height: 20px;
  width: 20px;
  border: 1px solid blue;
  text-align: center
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
&#13;
&#13;
&#13;

另外,正如您从片段中看到的那样,两个setTimeout / setIntervals无法顺利运行,您会得到一个非常闪烁的输出(可能是所需的输出?)

如果您不想要这个闪烁,那么您可以直接在.hide()内添加transition()调用,jquery / DOM将同时执行两个操作。< / p>

&#13;
&#13;
$("div").hide();
var i = 0;

function transition() {
  $("div").eq(i).hide();

  i++;
  if (i>=$("div").length-1) i = 0;

  $("div").eq(i).show();
}

setInterval(transition, 200);
&#13;
div {
  height: 20px;
  width: 20px;
  border: 1px solid blue;
  text-align: center
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
&#13;
&#13;
&#13;