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

Question

我正在尝试创建一个函数，它将在元素的附件中淡出。为了确保动画按顺序运行，并等待前面的动画完成，我尝试在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的延迟之后。

我怀疑这可能与我将“隐藏”、“appendTo”和“fadeIn”之类的东西应用到选择器的顺序有关。

Answer 1

我的猜测是，您可能是立即调用该函数，而不是引用它。如果您只是按下面的方式编辑，它就会做您想要的事情

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

检查小提琴