Question

问：当我点击按钮时，如何制作fadeOut当前页面和下一页的slideDown。我想让页面过渡fadeOut主页，加载（）新页面，然后slideDown（）下一页就像一个＆＃34;幕布＆＃34;。我可以把它变成fadeOut然后fadeIn，但不知何故，当我尝试做下一页slideDown它不起作用。我确实发现你的css样式需要隐藏元素以使它滑动，但我尝试了bot＆＃39; display：none＆＃39;和＆＃39; hide（）＆＃39;在调用过渡幻灯片效果之前，但没有运气。

我目前的解决方案：

（主页）：

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

（Aboutpage）：

<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

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

.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下一页过渡效果

1 个答案: