Add/Remove Delayed Class, Multiple Elements

by iraishere

HTML

<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<button>Click to run</button>

CSS

.row {
  background: #ccc;
  width: 100px;
  height: 20px;
  margin-bottom: 5px;
  transition: all 0.4s;
}

.active {
  background: green;
  width: 200px;
  transition: all 0.4s;
}

button {
  margin-top: 20px;
}

JavaScript

$('button').click(function () {
    var interval = 0;
   $.each( $('.row'), function(){
    // Check if .row is active 
    if ($('.row').hasClass('active')){
        // Remove class at interval
        var item = $(this);
        setTimeout(function(){
            item.removeClass('active')
        },interval);
        interval += 80;
    // If not...
    } else {
        // Add class at interval
        var item = $(this);
        setTimeout(function(){
            item.addClass('active')
        },interval);
        interval += 80;
    }
    });
});