Add/Remove Delayed Class, Multiple Elements
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').sort((a,b)=>{
if (a.offSetTop>b.offSetTop) return 1;
return -1;
}), 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;
}
});
});