javascript - 检测each()中最后一个元素的动画结束

Question

我有一个 SVG 路径的动画，我想要，例如。路径中最后一个元素之后的 addClass 通过动画完成。我尝试为 animate() 添加回调，但它不起作用，它在第一个循环结束时开始。然后我尝试了 .when(startAnimeDude()).then(doStuff()) 但它也是从一开始就开始的。我尝试的最后一件事是 i == i.length -1 并且它从一开始就开始(当动画仍在进行时)。我缺少什么？ 感谢您的阅读。

演示:http://jsfiddle.net/18yunbhk/

JS

var anim = function () {

    $.extend(jQuery.easing, {
        easeInOutQuad: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return -c / 2 * ((--t) * (t - 2) - 1) + b;
        }
    });

    var animeDude = function (parent, min, max, delayAnim) {
        var paths = $('svg').find('path');

        $.each(paths, function (i) {
            var totalLength = this.getTotalLength();

            $(this).css({
                'stroke-dashoffset': totalLength,
                'stroke-dasharray': totalLength + ' ' + totalLength
            });
            $(this).delay(delayAnim * i).animate({
                'stroke-dashoffset': 0
            }, {
                duration: Math.floor(Math.random() * max) + min,
                easing: 'easeInOutQuad'
            });

            if (i == 12) { //12 is last element
                console.log('sad');
            }

        });
    };

    var startAnimeDude = function (parent) {
        animeDude(parent, 0, 1000, 40);
    };
    startAnimeDude($('svg'));


};
anim();

Answer 1

类似

if (i === (paths.length - 1)) {
    console.log("sad");
}

<强> JSFIDDLE

如果您希望仅在动画完成时检查条件，那么您可以在动画的回调函数中编写该代码。

$(this).delay(delayAnim * i).animate({
    'stroke-dashoffset': 0
}, {
        duration: Math.floor(Math.random() * max) + min,
        easing: 'easeInOutQuad',
        complete: function() {
            if (i === (paths.length - 1)) { //12 is last element
               console.log('sad');
            } 
        }
});