页面加载时，如何让6个函数相互执行？

Question

加载页面时，在一个大的div中，有六个不同的元素和六个不同的函数，elements.I希望函数在确定后相互执行例如时间 1000ms.But 六个函数不绑定到一个元素，它们绑定到六个不同的元素。例如，当页面加载时，我想将 addClass "line1" 添加到元素“#linear1”，1000 毫秒后，从元素“#linear1”中删除类“.line1”，并立即， addClass "line2" 到元素“#linear2”，1000 毫秒后，从元素“#linear2”中移除类“.line2”，并立即， addClass "line3" 到元素“#linear3”，1000 毫秒后，从元素“#linear3”中移除类“.line3” ... addClass "line6" 到元素“#linear6”，1000 毫秒后，从元素“#linear6”中删除类“.line6” 然后回到“#linear1”..."linear6"...loop

jquery(".cspaceintro 是中间列的父 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%; }
}

Answer 1

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

链.promise()、.then() 到.dequeue() 以在调用队列中的所有函数和jQuery returns promise 对象时调用函数。

在 .then() 函数中将 #linearN 元素的 width 设置为 "0%"，再次调用原始函数，重复，在 .then() 链接到 .promise() 当队列为空函数时，以满足 "loop" 安排在异步函数调用后调用相同函数的要求。

问题描述了六个 #linearN 个元素

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

尽管在 css 处有三个 .lineN 声明，而不是六个。只有前三个 #linearN 元素被传递给 stacksnippets 中的函数。当在 css 处定义了六个 .lineN 声明时，删除链接到 $("[id^=linear]", middlecolumn).

的 .slice(0, 3)

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

页面加载时，如何让6个函数相互执行？

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

html

javascript

css

jquery

delay