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

Question

我设计了一个简单的网站，里面有一个家，一个页面和一个滑动联系表格。您可以看到网站here。

我想在索引和关于页面之间添加一个很好的转换。我想最简单的解决方案是淡入淡出，但滑动内容也可能看起来很好。我试图实现dynamic page script on CSS tricks，但无法使用我所使用的导航系统，而且效果也不是正确的顺序。我认为订单必须是：

1. 淡出（或滑动）当前页面
2. 更改页面高度以适应新内容
3. 在新页面淡出（或滑动）

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

谢谢，

尼克

ADDED

关闭按钮点击功能：

<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');

});

HTML

  

     

       

 <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div>

 <div class="current"><img src="images/bodhi-leaf-green.png"></div>
 <div class="text"><img src="images/home.png"></div>

 </a> </div>

     

       

 <div class="nav-image"><img src="images/bodhi-leaf-brown.png" class="flip"></div>

 <div class="current"><img src="images/bodhi-leaf-green.png" class="flip"></div>
 <div class="text"><img src="images/about.png"></div>

 </a> </div>

     

 <a href="index.html" class="" id="contact">

 <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div>

 <div class="current"><img src="images/bodhi-leaf-green.png"></div>
 <div class="text"><img src="images/contact.png"></div>

 </a> </div>

     

CSS

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;
}

Answer 1

Javascript实际上并不打算在页面之间转换，但我想你可以将它们放在一起，当有人点击你去的链接时$('body').fadeout(slow); 唯一的问题是在效果有时间完成之前页面可以很好地加载，当然你可以取消默认行为，执行效果然后转到所需的页面..

Answer 2

检查这个来源，用葡萄牙语，但你可以尝试：

jquery-transitions-como-fazer-transicoes-de-paginas

<强> 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

<div id="container">
<h1>Other page </h1>
Will appear with a <a class="transition" href="http://jsfiddle.net/ruanltbg/WvD7Q/1/embedded/result/">link</a> to the index.

<强> JS：

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

Demo

Answer 3

如果你想坚持使用CSS Tricks代码，我认为可以调整它以适合你。

动画订单

我最初尝试的时候没有注意到，但是 - 你是对的 - 淡出，淡入新内容，然后调整高度动画顺序是相当愚蠢的。您可以通过撤消动画顺序来使其按照您的意愿进行操作

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

联系表单

您可以通过更具体地说明要包含在委托中的内容来排除联系表单触发哈希变换（例如，对于链接标识#contact）

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

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

修改

在下面的评论之后，这个dynamicpage.js代码在动画之后将$pageWrap高度设置为自动（因此联系人的工作原理），并且当联系表单可见时用于允许页面更改时重新计算高度。

修改2

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

链接会消失，因为它们位于#guts div（实际上位于#main-content部分内部，实际上是褪色。如果你将它们移到外面，事情就会变得更好。不幸的是它们然后开始跳过正在删除的旧#guts内容与添加的新内容之间的差距，这样你就可以使用下面的一些CSS来解决这个问题。

但是，我不认为这是一个很好的解决方案。如果我是你，我会隐藏内容，将#guts设置为新的高度然后添加内容，因此#guts永远不会丢失其CSS设置高度。使用animate还可以让您对动画进行排队，如果您太快点击某些内容，这可能会偶尔出现问题。

$(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

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