Question

我想逐步制作4个部分的动画，我正在使用此代码..

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

给你想要的每个元素设置“bar”类的动画。然后你可以这样做：

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

Demo on JSFiddle

Answer 2

你可以通过递归弹出和移动jQuery元素集合来实现它：

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

<强> HTML

<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 )的主要功能，它将初步接收$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.

<强> CODE：

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

有关delay

的更多信息

希望它可以帮助你：）

动画功能比其他功能完成

3 个答案: