fadeIn()回调函数不会等到fadeIn()完成

时间:2018-06-29 05:50:52

标签: jquery fadein

我正在尝试创建一个函数,该函数将在元素的追加中淡出。为了确保动画按顺序运行并等待上一个动画完成,我正在尝试对带有fadeIn的回调函数进行递归使用。

$(document).ready(function() {
    var messages = [];
    messages.push("First message");
    messages.push("Second message")

    function appendContentText(newText, callbackFunction, callbackArgument) {
        $("<div>" + newText + "</div>").hide().appendTo("#content").fadeIn(1000, callbackFunction(callbackArgument));
    }

    function runMessageSequence(introCounter = 0) {
        if (introCounter == messages.length) return;
        else appendContentText(messages[introCounter], runMessageSequence, introCounter + 1);
    }

    runMessageSequence();
});

所有消息一起消失。因此,在我看来,随后的fadeIn立即被调用,而不是在1000 ms延迟之后被调用。

我怀疑这可能与我向选择器应用“ hide”,“ appendTo”和“ fadeIn”之类的顺序有关。

1 个答案:

答案 0 :(得分:3)

我的猜测是您可能正在立即调用该函数而不是对其进行引用。如果您仅按如下所示进行编辑,它将按照您的要求进行

$("<div>" + newText + "</div>").hide().appendTo("#content").fadeIn(1000, function(){
    callbackFunction(callbackArgument)
});

选中Fiddle