如何使JQuery加载fadeOut当前页和slideDown下一页过渡效果

How to make fadeOut current page and slideDown next page transition effect with JQuery load

问:当我点击一个按钮时,如何使当前页面淡出并在下一页滑动。我想让页面过渡 fadeOut 主页,load() 到新页面,然后 slideDown() 到下一页,就像 "curtain"。我可以让它淡出然后淡入,但不知何故当我尝试做下一页 slideDown 它不起作用。我确实发现你的 css 样式需要隐藏元素才能 slideDown,但我在调用过渡 slideDown 效果之前尝试了 bot 'display: none' 和 'hide()' 但没有成功。

我目前的解决方案:

(主页):

<div id="content">
<a class="btn btn-1 btn-1a about" href="about.php" id="aboutbtn">About me</a>
</div>

(关于页面):

<div class="aboutbg">
<a class="btn btn-2 btn-1b about" href="home.php" id="backbtn">Back</a>
</div>

JS:

$('#aboutbtn').click(function(){ 

    $('body').fadeOut(function() {
        $(this).load('about.php').fadeIn(); 
    });

    return false;

}); 

是否有替代解决方案来实现此目的或对我当前的解决方案进行补充。我错过了什么?

这是我能找到的最接近描述我的问题的灵感网站:

http://www.nicolasdesle.be/ - 点击-关于我。

有问题吗?就问吧!

预先感谢, /// E!

您需要对 code.Add CSS 主页进行两项更改,以隐藏您通过 jQuery load

加载的内容
.aboutbg{
            display: none;
        }

然后更改您的脚本以对已获取内容的 div 执行 fadeOut。

$('#aboutbtn').click(function () {
$("#content").fadeOut(500,function(){
     $('body').load('about.php', function () {
    $(".aboutbg").slideDown(1000);
})
});

return false;});