在运行下一个动画之前等待循环中的每个动画完成

Question

我希望在计数功能上运行延迟，所以每当计数器的完成类名称完成时，它就会在前一个完成后运行计数等。

0.0,"%"

Answer 1

这不适用于each循环。你必须自己使用complete回调，因为动画是异步的。

我会使用递归的自执行功能。非常简单，只需在完成后启动下一个。

var elements = $('.counter');
var current = 0;

(function next() {
    var $this = elements.eq(current),
        countTo = $this.attr('data-count');

    $({countNum: $this.text()}).animate({countNum: countTo}, {
        duration: 4000,
        easing: 'linear',
        step: function() {
            $this.text(Math.floor(this.countNum));
        },
        complete: function() {
            $this.text(this.countNum);

            if( (++current) < elements.length ) {
                next();
            }
        }
    });  
})();