jquery在将新页面加载到带动画的div中时出现问题

Question

我希望有一个div，它拥有一个淡出，卸载的PHP页面，然后在每个菜单上淡入新页面：

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

出于某种原因，它会在新页面消失之前闪烁，然后逐渐淡出并重新加载。

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

Answer 1

你应该在fade函数的回调中设置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) 
        });
    });

});