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()你想用来显示元素任何动画。