jQuery .load（）動畫

Question

我想用動態內容加載編寫簡單的頁面。我使用.load（）函數，它工作。但現在我想添加一些動畫來顯示頁面和隱藏頁面。例如，將頁面幻燈片隱藏到右側並顯示頁面slideUp。

這是我的代碼。

$('.main_nav a').click(function(){ 
    var toLoad = $(this).attr('href')+' .first_section'; 

    $('.content').load(toLoad); 

    return false; 
}); 

有人能幫助我還是讓我知道正確的方向？

例如，我們有一個2分div的（的index.php .first_section和about.php .first_section），當我們點擊 'about.php' 鏈接：

1. 開始隱藏動畫（使用.animate （）函數），用於 「的index.php .first_section」
2. 裝載 「about.php .first_section」，但這不DIV表示用於加載 「.first_section」
3. 開始打開的動畫（使用.animate（）函數）

Answer 1

將.content部分display:none默認情況下。然後，在JavaScript：

$('.main_nav a').click(function(){ 
    var toLoad = $(this).attr('href')+' .first_section'; 

    var content = $('.content'); 
    content.slideUp(); // hide the current content 
    content.load(toLoad); 
    content.slideDown(); // show the new content 

    return false; 
}); 

更改slideUp()您要使用隱藏元素無論動畫，slideDown()你想用來顯示元素任何動畫。