如何使用jQuery在两个页面的内容之间添加淡入淡出效果？

我设计了一个简单的网站，有主页、关于页面和滑动联系表单。你可以看到这个网站

我想在索引和about页面之间添加一个很好的转换。我想最简单的解决方案是淡入淡出，但滑动内容看起来也不错。我已经尝试实现了，但无法让它与我的导航系统工作到位，而且效果不是在正确的顺序。我想订单应该是：

淡出（或滑出）当前页面

改变页面高度以适应新内容

在新页面中淡入淡出（或滑动）

我想知道是否有人能推荐一种合适的方法来达到我想要的效果

谢谢

尼克

已添加

关闭按钮点击功能：

<script type="text/javascript">
$(document).ready(function(){
    $(".close").click(function(){
        $("#panel").slideUp("slow");
        $("#home").addClass("current");
        $("#contact").removeClass("current");
        return false;
    });
});
</script>

$("nav").delegate("a.fade", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");
        $(this).addClass("current");
        $("#contact").removeClass("current");
        return false;
    });

FULL DYNAMICPAGE.JS

$(function ()
{

    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el,
        $panel = $("#panel");

    $panel.visible = false;


    $(window).bind('hashchange', function ()
    {

        newHash = window.location.hash.substring(1);

        if (newHash)
        {
            if ($panel.visible)
            {
                $pageWrap.animate({ height: "-=" + $panel.height() + "px" }, function ()
                {
                    $pageWrap.height($pageWrap.height());
                    $panel.visible = false;
                });
                $panel.slideUp();
                baseHeight = $pageWrap.height() - $mainContent.height() - $panel.height();
            }
            else
            {
                $pageWrap.height($pageWrap.height());
                baseHeight = $pageWrap.height() - $mainContent.height();
            }

            $mainContent
                .find("#guts")
                .fadeOut(500, function ()
                {
                    $mainContent.hide().load(newHash + " #guts", function ()
                    {
                        $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function ()
                        {
                            $mainContent.fadeIn(500);
                            $pageWrap.css("height", "auto");
                        });

                });
                });
        };
    });

    $("nav").delegate("a.fade", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");
        $(this).addClass('clicked');
        $("a").not(this).removeClass('clicked');
        $(".current", this).stop().animate({
            opacity: 1
        }, {
            duration: 100,
            specialEasing: {
                opacity: 'linear',
            },

        });

        $(".current").not($(".current",this)).stop().animate({
                    opacity: 0
                }, {
                    duration: 2000,
                    specialEasing: {
                        opacity: 'linear',
                    },

                });

        return false;
    });

    $("#nav-bottom").delegate("a", "click", function ()
    {
        $("#panel").slideDown("slow");
        return false;
    });


    $("#contact").click(function ()
    {
        $("#panel").slideDown("slow");
//        $(this).addClass("current");
//        $("#home, #about").removeClass("current");
        $(this).addClass('clicked');
        $("a").not(this).removeClass('clicked');
        $(".current", this).stop().animate({
            opacity: 1
        }, {
            duration: 100,
            specialEasing: {
                opacity: 'linear',
            },

        });

        $(".current").not($(".current",this)).stop().animate({
                    opacity: 0
                }, {
                    duration: 2000,
                    specialEasing: {
                        opacity: 'linear',
                    },

                });

        $panel.visible = true;
        return false;
    });

    $(".close").click(function ()
    {
        $("#panel").slideUp("slow");
        $panel.visible = false;


        $(".current","#nav3").stop().animate({
            opacity: 0
        }, {
            duration: 2000,
            specialEasing: {
                opacity: 'linear',
            },

        });   

        return false;
    });

    $("nav a").hover(
        function() {
            if(!$(this).hasClass('clicked')){

            $(".current", this).stop().animate({
                opacity: 1
            }, {
                duration: 300,
                specialEasing: {
                    opacity: 'linear',
                },

            });
            }
        }, function() {
        if(!$(this).hasClass('clicked')){
            $(".current", this).stop().animate({
                opacity: 0
            }, {
                duration: 2000,
                specialEasing: {
                    opacity: 'linear',
                },

        });

        }
    });

    $(window).trigger('hashchange');

});

nav {
    width: 650px;
    height: 170px;
    position: absolute;
    top: 100;
    left: 200;
}

#nav1 {
    position: absolute;
    top: 0;
    left: 120px;
}

#nav2 {
    position: absolute;
    top: 0;
    left: 340px;
}

#nav3 {
    position: absolute;
    top: 0;
    left: 560px;
}


.nav-image  {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;

}

.current {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    opacity: 0;
}

HTML

---

Javascript并不是真正用来在页面之间转换的，但我想你可以把一些东西拼凑在一起，当有人点击链接时，你就会进入

$（'body'）。淡出（slow）
唯一的问题是，页面可能会在效果完成之前加载，当然，您可以取消默认行为，执行效果，然后转到所需页面
 Javascript并不是真正用来在页面之间转换的，但我想你可以一起破解一些东西，当有人点击链接时，你就会进入
$（'body'）。淡出（slow）
唯一的问题是，页面可能会在效果完成之前加载，当然，您可以取消默认行为，执行效果，然后转到所需页面
 检查这个源代码，它是葡萄牙语的，但是你可以试试：


html

<div id="container">
<h1>This is the index </h1>
Some text with <a class="transition" href="http://jsfiddle.net/ruanltbg/Ns97H/3/embedded/result/">link</a>.This link will do the effect

检查此源代码，它是葡萄牙语的，但您可以尝试：


html

<div id="container">
<h1>This is the index </h1>
Some text with <a class="transition" href="http://jsfiddle.net/ruanltbg/Ns97H/3/embedded/result/">link</a>.This link will do the effect

如果您确实想继续使用CSS技巧代码，我认为可以对其进行调整以适合您

动画顺序

刚开始尝试时我没有注意到，但是-你是对的-淡出，淡入新内容，然后调整高度动画顺序是相当愚蠢的。通过反转动画顺序，可以让它执行所需的操作

$pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function () { $mainContent.fadeIn(200); });

联系方式

例如，您可以通过更具体地说明代理中要包含的内容（对于链接id
#contact
），将联系人表单从触发hashchange中排除

这可能会也可能不会满足您的要求，例如，您可能确实希望联系人表单添加散列，以便人们可以链接到它。在这种情况下，您可以在hashchange事件中添加一个
if
，以检查
#contact
（或其他内容）

编辑

根据下面的注释，此dynamicpage.js代码在动画后将
$pageWrap
高度设置为自动（这样联系人就可以工作了），并在联系人表单可见时允许页面更改时重新计算高度

编辑2

当联系人窗体可见且链接淡出时，可以平滑地向上滚动。联系人表单无法平滑滚动，因为您将其原始（扩展）高度存储在
hashChange
中，并相对于该高度进行了调整。一旦动画完成并通过CSS删除了固定高度，它就会跳到更小的当前高度。我添加了一些代码，如果需要隐藏联系人表单，可以调整其高度

链接会褪色，因为它们位于
#guts
分区中（事实上，在
#main content
部分中，这会造成实际的褪色。如果你把它们移到这一部分之外，事情会变得更好。不幸的是，它们确实开始跳进被删除的旧
#guts
内容和被添加的新内容之间的间隙，因此你可以使用下面的CSS来解决这个问题

不过，我认为这不是一个很好的解决方案。如果我是你，我会隐藏内容，将
#guts
动画设置到新的高度，然后添加内容，这样
#guts
就不会丢失CSS设置的高度。使用
动画
还可以让你对动画进行排队，如果你点击，有时会出现问题事情太快了

$(function ()
{

    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el,
        $panel = $("#panel");

    $panel.visible = false;

    $("nav").delegate("a", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function ()
    {

        newHash = window.location.hash.substring(1);

        if (newHash)
        {
            if ($panel.visible)
            {
                $pageWrap.animate({ height: "-=" + $panel.height() + "px" }, function ()
                {
                    $pageWrap.height($pageWrap.height());
                    $panel.visible = false;
                });
                $panel.slideUp();
                baseHeight = $pageWrap.height() - $mainContent.height() - $panel.height();
            }
            else
            {
                $pageWrap.height($pageWrap.height());
                baseHeight = $pageWrap.height() - $mainContent.height();
            }

            $mainContent
                .find("#guts")
                .fadeOut(500, function ()
                {
                    $mainContent.hide().load(newHash + " #guts", function ()
                    {
                        $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function ()
                        {
                            $mainContent.fadeIn(500);
                            $pageWrap.css("height", "auto");
                        });

                        $("nav a").removeClass("current");
                        $("nav a[href=\"" + newHash + "\"]").addClass("current");
                    });
                });
        };
    });

    $("#contact").click(function ()
    {
        $("#panel").slideDown("slow");
        $(this).addClass("current");
        $("#home, #about").removeClass("current");
        $panel.visible = true;
        return false;
    });

    $(".close").click(function ()
    {
        $("#panel").slideUp("slow");
        $(curTab).addClass("current");
        $("#contact").removeClass("current");
        $panel.visible = false;
        return false;
    });

    $(window).trigger('hashchange');

});

CSS

如果您确实想坚持使用CSS技巧代码，我认为可以对其进行调整以适合您

动画顺序

刚开始尝试时我没有注意到，但是-你是对的-淡出、淡入新内容，然后调整高度动画顺序是相当愚蠢的。你可以通过颠倒动画顺序让它做你想做的事情

$pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function () { $mainContent.fadeIn(200); });

联系方式

例如，您可以通过更具体地说明代理中要包含的内容（对于链接id
#contact
），将联系人表单从触发hashchange中排除

这可能是您想要的，也可能不是您想要的，例如，您可能实际上希望联系人表单添加哈希，以便人们可以链接到它。在这种情况下，您可以在hashchange事件中添加
（如果
）来检查
#联系人
（或其他）

编辑

根据下面的注释，此dynamicpage.js代码在动画后将
$pageWrap
高度设置为自动（这样联系人就可以工作了），并在联系人表单可见时允许页面更改时重新计算高度

编辑2

当联系人窗体可见且链接淡出时，可以平滑地向上滚动。联系人窗体没有平滑地滚动，因为您存储了其原始内容（扩展）高度在hashChange
中，并相对于该高度进行了调整。动画完成后，固定高度通过CSS删除，它会跳到更小的当前高度。我添加了一些代码，可以在需要隐藏联系人表单时调整高度

链接
$("#container").fadeIn(2000);
$("a.transition").click(function(event){
    event.preventDefault();
    link = this.href;
    $("body").fadeOut(1000, function(){
        window.location = link;
    });
});

$pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function () { $mainContent.fadeIn(200); });

$("nav").delegate("a:not(#contact)", "click", function () { ... }

$(function ()
{

    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el,
        $panel = $("#panel");

    $panel.visible = false;

    $("nav").delegate("a", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function ()
    {

        newHash = window.location.hash.substring(1);

        if (newHash)
        {
            if ($panel.visible)
            {
                $pageWrap.animate({ height: "-=" + $panel.height() + "px" }, function ()
                {
                    $pageWrap.height($pageWrap.height());
                    $panel.visible = false;
                });
                $panel.slideUp();
                baseHeight = $pageWrap.height() - $mainContent.height() - $panel.height();
            }
            else
            {
                $pageWrap.height($pageWrap.height());
                baseHeight = $pageWrap.height() - $mainContent.height();
            }

            $mainContent
                .find("#guts")
                .fadeOut(500, function ()
                {
                    $mainContent.hide().load(newHash + " #guts", function ()
                    {
                        $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function ()
                        {
                            $mainContent.fadeIn(500);
                            $pageWrap.css("height", "auto");
                        });

                        $("nav a").removeClass("current");
                        $("nav a[href=\"" + newHash + "\"]").addClass("current");
                    });
                });
        };
    });

    $("#contact").click(function ()
    {
        $("#panel").slideDown("slow");
        $(this).addClass("current");
        $("#home, #about").removeClass("current");
        $panel.visible = true;
        return false;
    });

    $(".close").click(function ()
    {
        $("#panel").slideUp("slow");
        $(curTab).addClass("current");
        $("#contact").removeClass("current");
        $panel.visible = false;
        return false;
    });

    $(window).trigger('hashchange');

});

#nav-bottom {
    margin: -15px 0 15px -100px;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 200px;
}