Ajax页面淡入淡出并更改导航背景颜色

Question

例如，当我从家中点击时，我想更改导航的背景颜色。

您可以在此页面上看到示例，查看导航：EXAMPLE

即使从实际颜色X到Y.

这是序列：

1. 点击导航按钮时......
2. 更改网址的哈希标记
3. 当网址中的哈希标记发生变化时......
4. 淡出旧内容
5. 加载并淡入新内容

6. 更新当前导航突出显示并更改导航背景颜色

   $(function() {
   
   var newHash      = "",
   $mainContent = $("#main-content"),
   $pageWrap    = $("#page-wrap"),
   baseHeight   = 0,
   $el;
   
   $pageWrap.height($pageWrap.height());
   baseHeight = $pageWrap.height() - $mainContent.height();
   
   $("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) {
       $mainContent
           .find("#guts")
           .fadeOut(200, function() {
               $mainContent.hide().load(newHash + " #guts", function() {
                   $mainContent.fadeIn(200, function() {
                       $pageWrap.animate({
                           height: baseHeight + $mainContent.height() + "px"
                       });
                   });
                   $("nav a").removeClass("current");
                   $("nav a[href='"+newHash+"']").addClass("current");
               });
           });
   };
   
   });
   
   $(window).trigger('hashchange');
   
   });