Question

我正在尝试一个接一个地运行每个动画功能而不是一次运行。

这是我到目前为止所得到的：

   $(document).ready(function(){ 
        var bars = $('.bar');
        bars.each(function(){
            var widthpercent = $(this).attr("data-percent");
            $(this).fadeIn();
            $(this).animate({width:widthpercent},500);
        });
    });

我尝试在各种组合中使用.delay()和setTimeout()无效。

有人能指出我正确的方向吗？谢谢！

Answer 1

听起来我正在寻找animate的{{1}}功能。您可以编写一个递归函数来继续调用complete函数中的函数，直到所有项都被设置为动画。为了简化：每次激活一个元素时，都会触发一个回调函数来激活下一个元素。这是complete参数的目的，所以我确定这就是你要找的。

以下是您可以根据自己的特定需求进行调整的示例。

Live demo here (click).

complete

此外，同样的逻辑可以应用于您的var $divs = $('div'); function animate(element) { $(element).animate({height: '30px'}, { complete: function() { if (current < $divs.length-1) { ++current; animate($divs[current]); } } }); } var current = 0; animate($divs[current]);。只需围绕该逻辑包装fadeIn的回调，如下所示：

Live demo here (click).

fadeIn

这是你的代码：live demo here (click).

var $divs = $('div');

function animate(element) {
  $(element).fadeIn(function() { //now the animation is a callback to the fadeIn
    $(element).animate({height: '70px'}, {
      complete: function() {
        if (current < $divs.length-1) {
          ++current;
          animate($divs[current]);
        }
      }
    });
  });
}

var current = 0;
animate($divs[current]);

Answer 2

试试这个：

var animate = function (el) {
    return function () {
        var widthpercent = el.data('percent');
        el.fadeIn();
        el.animate({
            width: widthpercent
        }, 500);
    }
}
var bars = $('.bar');
bars.each(function (index) {
    var $this = $(this);
    setTimeout(animate($this), index * 500);
});

Fiddle

Answer 3

$(document).ready(function(){ 
    var bars = $('.bar');
    bars.each(function(i){
        var widthpercent = $(this).attr("data-percent");
        $(this).delay(i*800).animate({width:widthpercent,opacity:1,},500);
    });
});

这将在延迟800 * i毫秒之后进行动画处理。

请参阅此JSFiddle example。

$。每个动画单独运行

3 个答案:

Fiddle