Question

我有一个SVG路径的动画，我想例如。在路径中的最后一个元素之后使用动画完成addClass。我试图为animate（）添加一个回调但它不起作用，它在第一个循环结束时启动。然后我尝试了.when（startAnimeDude（））。然后（doStuff（））但它也从头开始。我尝试的最后一件事是i == i.length -1并且它也从头开始（动画仍在继续）。我错过了什么？谢谢你的阅读。

DEMO：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');
            } 
        }
});

检测每个（）中最后一个元素的动画结束

1 个答案: