Question

我以为我可以使用appendChild来模拟动画。除了第一个孩子之外，容器中的所有div都是隐藏的。这是我的代码到目前为止，我不知道它为什么在显示第二个div后停止。

HTML：

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

CSS：

.container div {
  display: none;
  border: 1px solid #000000;
  width: 100px;
  padding: 40px 0;
  text-align: center;
  margin: 0 auto;
}

.container div:first-child {
  display: block;
}

JavaScript：

function animateIt () {
  var container = document.querySelector('.container');
  var box = document.querySelector('.container div');

  container.appendChild(box);

};

setInterval( animateIt(), 1000 );

Answer 1

嗯，我发现这一点后我意识到我需要让setInterval( animateIt(), 1000 );看起来像这样：setInterval( animateIt, 1000 );

这是工作中的JS：

function animateIt () {
  var container = document.querySelector('.container');
  var box = document.querySelector('.container div');

  container.appendChild(box);

};

setInterval( animateIt, 1000 );

Answer 2

我想你想要：

setInterval( animateIt, 1000 );

appendChild动画只显示顶部div的div

2 个答案: