Changing the background color of one class, one by one with a delay

Question

I'm trying to change the background color of a particular class one by one with a delay and not everything simultaneously.

.item {
  height: 50px;
  width: 50px;
  background-color: green;
  margin-top: 10px;
}

<div class="item">
</div>

<div class="item">
</div>

<div class="item">
</div>

<div class="item">
</div>

To confirm, you want to apply the green background color to the first item div, then remove it and apply to the second one, and so-on? — Zac Webb, Dec 15 '16 at 10:01
[This might help](http://stackoverflow.com/questions/25351205/changing-color-of-multiple-divs-one-after-another) — Rino Raj, Dec 15 '16 at 10:05
Also this : http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop — Vanquished Wombat, Dec 15 '16 at 10:06
@VanquishedWombat i've tried this http://jsfiddle.net/vbwtW/ and i tried it with an animation onhover, but i want it on page reload or w/e. — D. Piep, Dec 15 '16 at 10:11
@ZacWebb No, i want to apply let's say another color red to all my divs but div 1 would be red first, after 1 second div2 would become red and so on. — D. Piep, Dec 15 '16 at 10:12
@RinoRaj Thankyou for the links, i've tried some of those which didnt help me. — D. Piep, Dec 15 '16 at 10:12

score 4 · Answer 1 · answered Dec 15 '16 at 10:09

The comments show solutions with JS. So I will complete this by adding a way to do it in CSS only with animations and delays:

.item {
  height: 50px;
  width: 50px;
  margin-top: 10px;
  background: black;
  animation: colorit 0.5s linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.item:nth-child(2) {
  animation-delay: 0.5s;
}
.item:nth-child(3) {
  animation-delay: 1s;
}
.item:nth-child(4) {
  animation-delay: 1.5s;
}
@keyframes colorit {
  from {
    background-color: black;
  }
  to {
    background-color: green;
  }
}
@-webkit-keyframes colorit {
  from {
    background-color: black;
  }
  to {
    background-color: green;
  }
}

<div class="item">
</div>

<div class="item">
</div>

<div class="item">
</div>

<div class="item">
</div>

Thankyou, im gonna try to process this in my javascript. and add the css dynamically. — D. Piep, Dec 15 '16 at 10:13

score 1 · Accepted Answer · answered Dec 15 '16 at 10:13

1

Here is a simple solution by using set timeout with an incrementing value for the timeout

http://codepen.io/Vall3y/pen/woQPeE

$('.item').each(function(i, item) {
  setTimeout(function() {
    item.classList.add('item--colored')
  }, i * 250);
});

answered Dec 15 '16 at 10:13

Vall3y

1,181
8
18

Thanks a lot! this fixed it =) – D. Piep Dec 15 '16 at 10:22
@Laurianti it seems nice, but this code is minimum. but thanks a lot for your answer. – D. Piep Dec 15 '16 at 10:23
minimum of this? $('.item').asyncCss('backgroundColor', 'red') ? ok – Laurianti Dec 15 '16 at 10:28

score 0 · Answer 3 · answered Dec 15 '16 at 10:19

jQuery.fn.extend({
 asyncCss: function(a, b, c) {
     var args = arguments;
          return this.each(function(i) {
            var j = $(this);
            setTimeout(function() {
                j.css.apply(j, args);
            }, i * 1000);

          });
        }
    });

function changeCssAsync() {
  $('.item').asyncCss({
      backgroundColor: 'red',
      width: '10px',
      height: '10px'
  });
}

.item {
  height: 50px;
  width: 50px;
  background-color: green;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

<input type="button" onclick="changeCssAsync()" value="Use me as .css() function" />

Changing the background color of one class, one by one with a delay

3 Answers3