javascript - 页面加载后，如何使六个功能相互执行？

当页面被加载时，在一个大的div中，有六个不同的元素，并且这些元素有六个不同的功能，我想让这些功能在确定的时间（例如1000ms）之后彼此执行，但是六个功能却不是绑定到一个元素，它们绑定到六个不同的元素。
例如，当页面加载时，我希望将class“ line1”添加到元素“＃linear1”中，在1000ms之后，从元素“＃linear1”中删除Class“ .line1”，
马上
将addClass“ line2”添加到元素“＃linear2”，1000毫秒后，从元素“＃linear2”中移除class“ .line2”，
马上
将addClass“ line3”添加到元素“＃linear3”，1000ms之后，从元素“＃linear3”中移除class“ .line3”
...
将addClass“ line6”添加到元素“＃linear6”，1000毫秒后，从元素“＃linear6”中移除class“ .line6”
然后回到“＃linear1” ...“ linear6” ...循环

jquery（“。cspaceintro是Middlecolumn的父div”）：

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

最佳答案

您可以使用.queue()将要为数组或jQuery对象中的每个元素调用的函数排队。在元素上设置.className，使用animationend将.one()事件附加到元素上，在animation结束处理程序调用时，在css结束处理程序上调用该元素，删除.className，在队列中调用下一个函数。

当队列中的所有函数都已被调用并且jQuery返回promise对象时，将.promise()，.then()链接到.dequeue()以调用函数。

在.then()函数中，将width元素的#linearN设置为"0%"，当队列中没有函数时，在链接到.then()的.promise()处再次重复调用原始函数，以满足调度的“循环”要求在异步函数调用之后要调用的相同函数。

问题描述了六个#linearN元素


  ...在1000毫秒后将addClass“ line6”添加到元素“＃linear6”，removeClass
  然后从元素“＃linear6”返回“ .line6”
  “＃linear1” ...“ linear6” ...循环


尽管在.lineN处有三个css声明，而不是六个。仅前三个#linearN元素在stacksnippets中传递给函数。在.lineN定义了六个css声明时，请删除链接到.slice(0, 3)的$("[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>