php - 将新页面加载到带有动画的 div 中的 jquery 问题

Question

我希望有一个 div，它包含一个 php 页面以淡出、卸载，然后在每个菜单上淡入一个新页面:

        $('#home').click(function() {
        $('#page_container').fadeOut(500).unload();
        $('#page_container').load('php/home.php').fadeIn(550);
    });

出于某种原因，它会闪烁新页面，然后在第一次淡出之前淡出并重新加载。

有人可以帮我解决这个问题吗？我确信它很简单，但我似乎找不到正确的语法来让它工作？

Answer 1

您应该将 load() 调用设置为在 fade 函数的回调中发生:

$("#home").on("click", function () {
    $('#page_container').fadeOut('fast', function() {
        $(this).unload();
        $(this).load('php/home.php');
    });
})

这将在淡入淡出完成后触发 load()。

fadeOut() 是异步的，因此调用后立即执行下一行。您的问题是因为 load() 在开始淡出时立即将内容加载到您的 div 中。