文档加载完毕，对六个不同元素按次序执行不同的函数，jquery应该怎么做

Question

在父div里，有6个div元素，左边3个，右边3个，
分别是：linear1，linear2,...,linear6,
想要达到的效果是：
文档加载完毕，开始对linear1执行addClass("line1"),经过1000ms,removeClass("line1"),之后马上，对linear2执行addClass("line2"),经过1000ms,removeClass("line2")，之后一直到linear6元素addClass和removeClass完毕后，重新回到第一个元素，开始循环

jquery(".cspaceintro 是middlecolumn的父元素"):

$(document).ready(function(){
$(".cspaceintro").load(function(){
$("#linear1").addClass("line1");

//here,往下应该怎么做呢

})
})

html:

<div class="middlecolumn">
            <div class="left1">
                <div id="linear1"  ></div>
            </div>
            <div class="left2">
                <div id="linear2" ></div>
            </div>
            <div class="left3">
                <div id="linear3" ></div>
            </div>
            <div class="right1">
                <div id="linear4" ></div>
            </div>
            <div class="right2">
                <div id="linear5" ></div>
                <!-- <div class="point"></div> -->
            </div>
            <div class="right3">
                <div id="linear6" ></div>
            </div>
            

css:

.line1{
float: right;

width: 0%;
height: 3px;
background-color: #2e9edd;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#2e9edd),       to(#2e9edd));

-webkit-animation:aaa 1s linear 1;
-webkit-animation-fill-mode:both;
}
.line2{
float: right;
position: relative;
top:30px;
width: 0%;
height: 3px;
background-color: #2e9edd;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#2e9edd),    to(#2e9edd));

-webkit-animation:aaa 1s linear 1;
-webkit-animation-fill-mode:both;

}
.line3{
float: right;
position: relative;
top:50px;
width: 0%;
height: 3px;
background-color: #2e9edd;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#2e9edd),     to(#2e9edd));

-webkit-animation:aaa 1s linear 1;
-webkit-animation-fill-mode:both;
}

@keyframes aaa{

0%  {width:0%; }
30% {width:30%; }
60% {width:60%; }
100%{width:95%; }
}

Answer 1

FYI:

$(function() {
    var i = 1,
        st = setInterval(function() {
            $("[id^='linear']").removeClass().filter("#linear" + i).addClass("line" + i);
            i = i % 6 + 1;
        }, 1000)
})

Answer 2

$(function() {
    var i = 0,
        st = setInterval(function() {
            console.log(i);
            $(".middlecolumn > div").eq(i).addClass('line' + (i + 1)).siblings().removeClass(function(i, old){
                    return old.match(/line\d+/, '') ? old.match(/line\d+/, '')[0] : '';
            });
            i = i >= 5 ? 0 : ++i;
        }, 1000)
})

Answer 3

var index = 0;
var divs = $(".middlecolumn > div");
var length = divs.length;
setInterval(function(){
     divs.eq(index%length).addClass("line" + (index%length +1) );
     divs.eq((index-1)%length).removeClass("line" + ((index-1)%length + 1));
     index ++ ;
},1000);


看我写的：https://jsfiddle.net/wzmeh2o4/