动画结束前调用功能

Question

function seite(j, element, callback){
            if (j==0) {$(element).css({"visibility": "hidden"});};
            var ele = $(element).eq(j), str = ele.text(), progress = 0;
            ele.text('');
            $(element).eq(j).css({"visibility": "visible"});
            var timer = setInterval(function() {
                ele.text(str.substring(0, ++progress));
                if (progress >= str.length){
                    clearInterval(timer);
                    if (j==$(element).length) {
                        callback();
                    };
                    $('body').animate({
                        scrollTop: ($(element).eq(j).offset().top)
                    },500);
                    seite(j+1, element, callback);
                }
            }, 10);
        }

这就像同一类元素的打字机一样。 问题是在动画结束之前调用seite() ，这样动画就不会停止和停滞。

Answer 1

问题（显示在您自己的答案中）没有延迟回调（它仍可立即运行）。

您需要将调用包装到匿名函数中的回调中。

尝试这个：

$('body').animate({
    scrollTop: ($(element).eq(j).offset().top),
    done: function(){ seite(j+1, element, callback); }
},500);

要么

$('body').animate({
    scrollTop: ($(element).eq(j).offset().top)
},500, function(){ seite(j+1, element, callback); });

Answer 2

找到了解决方案（简单语法错误）：

function seite(i, element, callback) {
window.j = i;
if (window.j == 0) {
    $(element).css({
        "visibility": "hidden"
    });
};
var ele = $(element).eq(window.j),
    str = ele.text(),
    progress = 0;
ele.text('');
$(element).eq(window.j).css({
    "visibility": "visible"
});
var timer = setInterval(function () {
    ele.text(str.substring(0, ++progress));
    if (progress >= str.length) {
        clearInterval(timer);
        if (window.j == $(element).length) {
            callback();
        } else {
            $('body').animate({
                scrollTop: ($(element).eq(window.j).offset().top),
            }, {
                duration: 500,
                complete: function () {
                    seite(window.j + 1, element, callback);
                }
            });
        }
    }
}, 10);

}