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

Question

问：当我点击一个按钮时，如何使当前页面淡出并在下一页滑动。我想让页面过渡 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!

Answer 1

您需要对 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;});

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

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

jquery

load

slidedown

fadeout

fadein