Quando a página é carregada, como fazer seis funções executadas uma pela outra?

Question

Apr 23, 2017, 05:30 AM

Quando a página é carregada, como fazer seis funções executadas uma pela outra?

Quando a página é carregada, em uma grande div, existem seis elementos diferentes e há seis funções diferentes para os elementos.Eu quero fazer com que as funções sejam executadas uma após a outra após um certo tempo, por exemplo, 1000ms.Mas as seis funções não são vincular a um elemento, eles estão vinculados a seis elementos diferentes. Por exemplo, quando a página é carregada, desejo addClass "line1" no elemento "# linear1", após 1000ms, removeClass ".line1" do elemento "# linear1" e imediatamente adicione a classe "line2" ao elemento "# linear2" , após 1000 ms, remova a classe ".line2" do elemento "# linear2" e adicione imediatamente a classe "line3" ao elemento "# linear3", após 1000 ms, remova a classe ".line3" do elemento "# linear3" ... addClass "line6 "to element" # linear6 ", após 1000 ms, remova a classe" .line6 "do elemento" # linear6 "e depois volte para o loop" # linear1 "..." linear6 "...

jquery (". cspaceintro é uma div pai para a coluna do meio"):

$(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>

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