动画功能比其他功能

Question

我想一步一步地动画四部分，我正在使用这段代码。

$(".bar_1").animate(
height: "100px",
500,
function(){
   $(".bar_2").animate(
   height: "100px",
   500,
   function(){
      $(".bar_3").animate(
      height: "100px",
      500,
      function(){
         $(".bar_4").animate(
         height: "100px",
         500,
         function(){
             ///Similarity Next Bars
         });
      });

   });
});

我有任何可能，我可以创建一个函数，将运行一些特定的时间自动。也就是说，如果我使用上述方法将.bar_1动画化为.bar_7，那么我的编码就变得非常复杂。

Answer 1

给每个你想要动画类“条形图”的元素。然后你就可以这样做：

var $bars = $('.bar');
(function animateBar(i) {
    $bars.eq(i).animate({ height: "100px" }, 500, function() {
        animateBar(i + 1);
    });
})(0);

基于JSFiddle的演示

Answer 2

您可以通过递归地弹出和移动jQuery元素集合来做到这一点：

小提琴：http://jsfiddle.net/Varinder/dJ79q/2/

<div class="bar_1">Number 1</div>
<div class="bar_2">Number 2</div>
<div class="bar_3">Number 3</div>
<div class="bar_4">Number 4</div>

JS

首先，缓存要处理的dom元素集合，以及另一个变量$elementsArray，该变量最初将$elements中的元素保持为工作对象。

var $elementsArray = -1;
var $elements = $("div");

有一个名为animate( element )的方便的函数，它将动画化传递的元素，并对进一步概述的函数执行简单的回调：

function animate( element ) {
    var $element = $(element);
    $element.animate({height:"100px"}, 500, sequentialyAnimate );
}

名为sequentialyAnimate( $elements )的Main函数，它将初始化接收一个$elements集合，以启动进程

function sequentialyAnimate( $elements ) {
    if ( $elements != undefined ) {
        $elementsArray = $elements; // adding $elements to $elementsArray
    }
    animationElement = $elementsArray.get(0); // get the first element - this will be a DOM element
    $elementsArray = $elementsArray.slice(1); // remove it from the array
    animate( animationElement ); // animate the current DOM element
}

最后，只需使用必要的jQuery元素集合调用上面的函数即可：

sequentialyAnimate( $elements );

Answer 3

这是您的解决方案，有一个迷你代码

使用延迟的

Set a timer to delay execution of subsequent items in the queue.

代码：

$(document).ready(function(){
    $delay = [];
    for($i=1;$i<8;$i++){
    $delay[$i] = 3000 * ($i-1)
        $(".bar_"+$i).delay($delay[$i]).animate({height: 100},3000);

    }
    })

小提琴http://jsfiddle.net/krunalp1993/wmgZ3/

更多关于延迟的信息

希望它能帮助你:)