如何使用 JQuery 加载淡出当前页面和向下滑动下一页过渡效果答案

【问题标题】：How to make fadeOut current page and slideDown next page transition effect with JQuery load如何使用 JQuery 加载淡出当前页面和向下滑动下一页过渡效果
【发布时间】：2016-07-22 03:31:17
【问题描述】：

问：当我单击一个按钮时，如何使当前页面淡出并与下一页一起向下滑动。我想让页面过渡淡出主页，加载（）新页面，然后像“窗帘”一样滑动下一个页面。我可以让它淡出然后淡入，但是当我尝试让下一页滑动时它不工作。我确实发现您的 css 样式需要隐藏元素才能使其向下滑动，但我在调用过渡 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！

【问题讨论】：

标签： jquery load fadein fadeout slidedown

【解决方案1】：

您需要对代码进行两处更改。将 CSS 添加到您的主页以隐藏您通过 jQuery 加载加载的内容

.aboutbg{
            display: none;
        }

然后更改您的脚本以在具有内容的 div 上执行淡出。

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

return false;});

【讨论】：