страница загружена, в большом div есть шесть разных элементов и шесть разных функций для элементов. Я хочу, чтобы функции выполнялись друг другом через определенное время, например 1000 мс. Но шесть функций не являются привязать к одному элементу, они связаны с шестью различными элементами. Например, когда страница загружена, я хочу добавить addClass "line1" к элементу "# linear1", через 1000 мс удалить removeClass ".line1" из элемента "# linear1" и немедленно добавить addClass "line2" к элементу "# linear2" , через 1000 мс, удалить класс ".line2" из элемента "# linear2" и немедленно добавить addClass "line3" к элементу "# linear3", после 1000 мс удалить класс ".line3" из элемента "# linear3" ... addClass "line6 "to element" # linear6 ", через 1000 мс удалить класс" .line6 "из элемента" # linear6 ", а затем вернуться к циклу" # linear1 "..." linear6 "...

jquery (". cspaceintro - это родительский div для middlecolumn"):

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

   //here,I don't know what to do next..

})
})

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%; }
}