Serial Animation

by niki4810

HTML

<div class="container">
    <div class="children"> <h1>1</h1></div>
    <div class="children"> <h1>1</h1></div>
    <div class="children"> <h1>1</h1></div>
</div>

CSS

.highlight{
    background : #ffa500;
    color : #fff;
}

JavaScript

$(function(){
    var childEle  = $(".children");
    var totalNumOfChildren = childEle.length;
    var i =0;
    var interval =  setInterval(function(){
        var currentChild = childEle[i];
        $(currentChild).addClass("highlight");
        i = i + 1;
        if(i === totalNumOfChildren){
            window.clearInterval(interval);
        }
    },1000);
});