Javascript 加载页面时，如何使六个函数相互执行？

加载页面时，在一个大div中，有六个不同的元素，元素有六个不同的函数。我想让函数在一个确定的时间后（例如1000ms）彼此执行。但是这六个函数并没有绑定到一个元素，而是绑定到六个不同的元素。 例如，加载页面时，我希望将class“line1”添加到元素“#linear1”，在1000ms之后，从元素“#linear1”中删除class“.line1”， 而且马上,， 将class“line2”添加到元素“#linear2”，1000ms后，从元素“#linear2”中删除class“.line2”， 而且马上,， 将Class“line3”添加到元素“#linear3”，在1000ms后，从元素“#linear3”中删除Class“.line3” ... 将Class“line6”添加到元素“#linear6”，1000ms后，从元素“#linear6”中删除Class“.line6” 然后返回到“#linear1”…“linear6”…循环

jquery（“.cspaceintro是middlecolumn的父div”）：

html:

可以使用

.queue（）

将要为数组或jQuery对象中的每个元素调用的函数排队。在元素处设置

.className

，使用

.one（）

将

animationend

事件附加到元素，在

动画

处，在元素的

css

动画完成时结束调用处理程序，移除

.className

，调用队列中的下一个函数

将

.promise（）

，

.then（）

链接到

.dequeue（）

以在队列中的所有函数都被调用并且jQuery返回promise对象时调用函数

在

.then（）

函数将

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

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

。。。将类别“line6”添加到元素“#linear6”，1000ms后，移除类别
“.line6”从元素“#linear6”返回到
“线性1”…“线性6”…循环

虽然
css
中有三个
.lineN
声明，但不是六个。只有前三个
#linearN
元素被传递到stacksnippets的函数。当在
css
中定义了六个
.lineN
声明时，删除链接到
$（“[id^=linear]”，middlecolumn）的
.slice（0,3）


$（函数（）{
var middlecolumn=$（“.middlecolumn”）；
var linearLines=$（“[id^=linear]”，中间列）；
函数动画线（列、线）{
return column.queue（“lines”，$.map（行，函数（el，索引））{
返回函数（下一步）{
$（el）.addClass（“行”+（索引+1））
.1（“动画结束”，函数（）{
$（this.removeClass（“行”+（索引+1））；
设置超时（下一步，1000）；
})
}
})).出列（“行”）.承诺（“行”）
.然后（函数（）{
日志（“行队列完成”
，“\n`animateLines`预定在下一行调用”）；
返回动画线（列、行.css（“宽度”、“0%”）；
})
}
动画线（中间柱、线性线）；
})
.line1{
浮动：对；
宽度：0%；
高度：3倍；
背景色：#2e9edd；
背景：-webkit线性梯度（0,0 100%，从（#2e9edd）到（#2e9edd））；
-webkit动画：aaa 1s线性1；
-webkit动画填充模式：两者都有；
}
.line2{
浮动：对；
位置：相对位置；
顶部：30px；
宽度：0%；
高度：3倍；
背景色：#2e9edd；
背景：-webkit线性梯度（0,0 100%，从（#2e9edd）到（#2e9edd））；
-webkit动画：aaa 1s线性1；
-webkit动画填充模式：两者都有；
}
.line3{
浮动：对；
位置：相对位置；
顶部：50px；
宽度：0%；
高度：3倍；
背景色：#2e9edd；
背景：-webkit线性梯度（0,0 100%，从（#2e9edd）到（#2e9edd））；
-webkit动画：aaa 1s线性1；
-webkit动画填充模式：两者都有；
}
@关键帧aaa{
0% {
宽度：0%；
}
30% {
宽度：30%；
}
60% {
宽度：60%；
}
100% {
宽度：95%；
}
}

我在代码中看不到任何功能您可以使用
css
来实现预期的结果。你能把你在
css
或
javascript
中试图解决的问题包括在内吗？请看@brk，我添加了我在jquery文件中写的内容。@guest271314我只是上传了一些jquery代码，非常简单
$(document).ready(function(){
$(".cspaceintro").load(function(){
   $("#linear1").addClass("line1");

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

})
})

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

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