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

});