在动画结束前调用函数

时间:2015-04-09 15:52:57

标签: javascript jquery animation callback

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(),因此动画永远不会停止并且滞后。

2 个答案:

答案 0 :(得分:0)

问题(显示在你自己的答案中)并没有推迟回调(它仍然会立即运行)。

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

试试这个:

$('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); });

答案 1 :(得分:0)

找到解决方案(简单的语法错误):

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);

}