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

Question

我正在寻找一个 div，它包含一个 php 页面以淡出、卸载，然后在每个菜单上淡入一个新页面：

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

出于某种原因，它会闪烁新页面，然后在第一个实例中淡出，淡出并重新加载。

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

Answer 1

您应该将load()调用设置为在淡入淡出函数的回调中发生：

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

load()一旦淡入淡出完成，这将触发。

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

Answer 2

没有演示很难完全理解，但是您是否看过使用回调？

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

});