javascript - 仅在淡出后加载内容

Question

我正在尝试在 fadeOut 和 fadeIn 之间加载内容。

如果我尝试运行以下代码，内容会在淡出完成之前加载:

$("#contentArea").fadeOut(1000);
$("#contentArea").promise().done();
$("#contentArea").load(content_map[$(this).attr('id')]);
$("#contentArea").fadeIn(1000);

我尝试在 fadeOut 中放置一个回调函数，但该回调中的 load 仍然被提前调用。我尝试在 fadeOut 之后添加 setTimeout，但仍然不起作用。

我添加了promise函数(这显然很关键)，无论是否有回调函数来保存后续操作，但它不起作用。

我很高兴知道如何最好地实现这种效果，如果有人也可以给我一些提示，说明为什么我的其他尝试失败，这将是一个很棒的奖励:)

Answer 1

回调函数应该可以工作，所以我怀疑你做错了。应该是:

$("#contentArea").fadeOut(1000, function() {
    $(this).load(content_map[this.id], function() {
        $(this).fadeIn(1000);
    });
});