Question

$("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已经显示在彼此之后但没有再次隐藏 - 它们排成一行。

Answer 1

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

＆＃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;

Answer 2

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

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

$("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;

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

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

＆＃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;

.show和.hide每个<div>

2 个答案: