当页面加载时，如何使每个其他人执行六个函数？ [英] When the page is loaded,how to make six functions executed by each otherr?

查看：110
本文介绍了当页面加载时，如何使每个其他人执行六个函数？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当页面被加载时，在一个大的div中，有六个不同的元素，并且对于这些元素有六种不同的功能。我希望在确定的时间之后例如1000ms使这些功能彼此执行。但是六函数不绑定到一个元素，它们绑定到六个不同的元素。
例如，加载页面时，我希望addClassline1在元素＃linear1后1000ms之后，从元素＃linear1，
和立即$ b中移除removeClass.line1 $ b addClassline2到元素＃linear2，1000毫秒后，从元素＃linear2，
和立即
addClassline3到元素＃linear3的removeClass.line2在1000毫秒后，从元素＃linear3中删除类.line3
...
addClassline6到元素＃linear6，在1000ms后，从元素＃linear6移除类
然后返回到＃linear1...linear6... loop

jquery（.cspaceintro是middlecolumn的父级div）： 

  $（document）.ready（function（）{
 $（。cspaceintro）。load（function （）{
 $（＃linear1）。addClass（line1）; 
 
 //这里，我不知道下一步该怎么做.. 
 
 $）
））

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; 
 
宽度：0％; 
 height：3px; 
背景颜色：＃2e9edd; 
 background：-webkit-gradient（线性，0 0，0 100％，从（＃2e9edd）到（＃2e9edd））; 
 
 -webkit-animation：aaa 1s linear 1; 
 -webkit-animation-fill-mode：both; 
} 
 .line2 {
 float：right; 
职位：亲属; 
 top：30px; 
宽度：0％; 
 height：3px; 
背景颜色：＃2e9edd; 
 background：-webkit-gradient（线性，0 0，0 100％，从（＃2e9edd）到（＃2e9edd））; 
 
 -webkit-animation：aaa 1s linear 1; 
 -webkit-animation-fill-mode：both; 
 
} 
 .line3 {
 float：right; 
职位：亲属; 
 top：50px; 
宽度：0％; 
 height：3px; 
背景颜色：＃2e9edd; 
 background：-webkit-gradient（线性，0 0，0 100％，从（＃2e9edd）到（＃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％; } 
}


解决方案

c $ c> .queue（）来为数组或jQuery对象中的每个元素调用一个函数。在元素处设置 .className ，使用 .one（）将元素附加 animationend code>，在动画元素的 css 动画完成时调用的结束处理程序，remove .className ，调用队列中的下一个函数。
$ b 链 .promise（）， .then（）到 .dequeue（）来调用函数，当队列中的所有函数都被调用并且jQuery返回promise对象。

在 .then（）函数集 width of #linearN 元素为0％，重复地调用原始函数。然后（）链接到 .promise（）当队列中的函数为空时，为了满足调用相同函数的循环异步函数调用。



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


... addClassline6到元素＃linear6，在1000ms后，从元素＃linear6移除元素
.line6然后返回到
＃linear1...linear6... loop


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



  $（function（）{var middlecolumn = $（。middlecolumn）; var linearLines = $（[id ^ = linear] ，middlecolumn）.slice（0，3）;函数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，\\\
`animateLines` call scheduled at next line  ）; return animateLines（column，lines.css（width，0％））; }}} animateLines（middlecolumn，linearLines）;}）

.line1 {float：right;宽度：0％; height：3px; background-color：＃2e9edd;背景：-webkit-linear-gradient（0 0，0 100％，从（＃2e9edd）到（＃2e9edd））; -webkit-animation：aaa 1s linear 1; -webkit-animation-fill-mode：both;}。line2 {float：right;位置：相对;顶部：30px;宽度：0％; height：3px; background-color：＃2e9edd;背景：-webkit-linear-gradient（0 0，0 100％，从（＃2e9edd）到（＃2e9edd））; -webkit-animation：aaa 1s linear 1; -webkit-animation-fill-mode：both;}。line3 {float：right;位置：相对;顶部：50px;宽度：0％; height：3px; background-color：＃2e9edd;背景：-webkit-linear-gradient（0 0，0 100％，从（＃2e9edd）到（＃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>

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

解决方案

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>

这篇关于当页面加载时，如何使每个其他人执行六个函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆