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

不过，所有消息都一起淡入淡出。所以在我看来，随后的淡入是立即调用的，而不是在 1000 毫秒延迟之后调用的。

我怀疑这可能与我将 'hide' 和 'appendTo' 以及 'fadeIn' 应用到选择器的顺序有关。

Answer 1

我的猜测是您可能会立即调用函数而不是引用它。如果你只是编辑如下，它会做你想要的

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

勾选Fiddle

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

fadeIn() callback function not waiting until fadeIn() is complete

jquery

fadein