Как добавить эффект затухания между содержимым на двух страницах с помощью jQuery?

Я разработал простой веб-сайт с домашней страницей и страницей о компании, а также скользящей контактной формой. Вы можете увидеть сайт здесь.

Я хотел бы добавить красивый переход между страницами index и about. Я полагаю, что самым простым решением было бы затухание, но скользящий контент тоже может выглядеть хорошо. Я попытался реализовать сценарий динамической страницы на хитростях CSS, но не удалось заставить его работать с имеющейся у меня навигационной системой, а также эффекты не в правильном порядке. Я предполагаю, что порядок должен быть таким:

1. Исчезать (или сдвигать) текущую страницу
2. Изменить высоту страницы, чтобы она соответствовала новому содержимому
3. Исчезать (или скользить) на новой странице

Интересно, может ли кто-нибудь порекомендовать подходящий метод для достижения эффекта, который я ищу.

Спасибо,

Ник

ДОБАВЛЕНО

ЗАКРЫТЬ КНОПКУ НАЖМИТЕ ФУНКЦИЮ:

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

ПОЛНАЯ ДИНАМИЧЕСКАЯ СТРАНИЦА.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;
}