CODEWITHSUNDEEP
javascript
Mdd
Mdd

Reputation: 4400

appendChild to animate divs showing only the top div

I thought I could use appendChild to simulate an animation. All the divs in a container are hidden except for the first-child. Here is my code so far, I am not sure why it stops after displaying the second div.

Fiddle: http://jsfiddle.net/dFzA7/

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

Upvotes: 0

Views: 67

Answers (2)

loveNoHate
loveNoHate

Reputation: 1547

I think you want:

setInterval( animateIt, 1000 );

Upvotes: 1

Mdd
Mdd

Reputation: 4400

Well, I realized as soon as I posted this that i needed to make the setInterval( animateIt(), 1000 ); look like this: setInterval( animateIt, 1000 );

Here's the working JS:

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

  container.appendChild(box);

};

setInterval( animateIt, 1000 );

Upvotes: 1

Related Questions