When the page is loaded,how to make six functions executed by each otherr?

Question

When the page is loaded , in a big div, there are six different elements and there are six different functions for the elements.I want to make the functions execute by each other after a sure time for example 1000ms.But the six functions are not bind to one elements ,they are binded to six different elements. For example, when the page is loaded,I want addClass "line1" to element "#linear1", after 1000ms, removeClass ".line1" from element "#linear1", and immediately, addClass "line2" to element "#linear2", after 1000ms, removeClass ".line2" from element "#linear2", and immediately, addClass "line3" to element "#linear3", after 1000ms, removeClass ".line3" from element "#linear3" ... addClass "line6" to element "#linear6", after 1000ms, removeClass ".line6" from element "#linear6" then back to "#linear1"..."linear6"...loop

jquery(".cspaceintro is a parent div for 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>

part of 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

You can use .queue() to queue a function to be called for each element in an array or jQuery object. Set .className at element, attach animationend event to element using .one(), at animation end handler called when css animations complete for the element, remove .className, call next function in queue.

Chain .promise(), .then() to .dequeue() to call function when all functions in queue have been called and jQuery returns promise object.

At .then() function set width of #linearN element to "0%", call original function again, repeatedly, at .then() chained to .promise() when queue is empty of functions, to satisfy "loop" requirement of scheduling same function to be called following asynchronous function calls.

The Question describes six #linearN elements

... addClass "line6" to element "#linear6", after 1000ms, removeClass ".line6" from element "#linear6" then back to "#linear1"..."linear6"...loop

though there are three .lineN declarations at css, not six. Only first three #linearN elements are passed to function at stacksnippets. When six .lineN declarations are defined at css, remove .slice(0, 3) chained to $("[id^=linear]", middlecolumn).

$(function() {

  var middlecolumn = $(".middlecolumn");
  var linearLines = $("[id^=linear]", middlecolumn).slice(0, 3);

  function animateLines(column, lines) {
    return column.queue("lines", $.map(lines, function(el, index) {
        return function(next) {
          $(el).addClass("line" + (index + 1))
            .one("animationend", function() {
              $(this).removeClass("line" + (index + 1));
              setTimeout(next, 1000);
            })
        }
      })).dequeue("lines").promise("lines")
      .then(function() {
        console.log("lines queue complete"
        , "\n`animateLines` call scheduled at next line");
        return animateLines(column, lines.css("width", "0%"));
      })
  }

  animateLines(middlecolumn, linearLines);

})

.line1 {
  float: right;
  width: 0%;
  height: 3px;
  background-color: #2e9edd;
  background: -webkit-linear-gradient(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-linear-gradient(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-linear-gradient(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%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<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>
</div>