是否有可能使用jQuery为背景URL制作动画？

Question

我想知道是否有可能使用jQuery来动画背景URL，如果没有，我有什么替代方案。我的导航栏HTML看起来像这样：

<li><a href="index.html" class="fade nav top current" id="index"><img style="margin: 90px 0 0 0px" src="images/home.png"></a></li> 
    <li><a href="about.html" class="fade nav bottom" id="about"><img class="flip" style="margin: 84px 3px 0 0px" src="images/about.png"></a></li> 
    <li><a href="#" id="contact" class="nav top"><img style="margin: 82px 2px 0 0px" src="images/contact.png"></a></li> 

然后在导航栏中的链接的CSS是这样的：

a.nav { 
    height: 170px; 
    width: 118px; 
    display: block; 
    margin: 0 auto; 
} 

a.top, a.bottom { 
    background: url('images/bodhi-leaf-brown.png') no-repeat; 
} 

a.current, nav a:hover { 
    background: url('images/bodhi-leaf-green.png') no-repeat !important; 
} 

然后，我有一个jQuery脚本既控制接触的滑动形式和增加，并从导航链接删除类“当前”到/使背景图像变化：

$(function() 
{ 

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

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

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

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

     if (newHash) 
     { 
      $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"); 
        curTab = "#" + /^(.+)\..+$/.exec(newHash)[1]; 
        $(curTab).addClass("current"); 
        }); 
       }); 
     }; 
    }); 

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

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

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

}); 

我希望有背景图像之间的淡入淡出悬停和点击˚F也是联合。因此我的问题是关于使用jQuery为背景图片设置动画效果。如果无法做到这一点，是否还有另外一种方法可以使用，这些方法将包含我拥有的现有脚本？

您可以看到当前页面的页面here。

感谢，

尼克

Answer 1

这里是你如何使用悬停功能与动画。有更多的效果，只需在jQuery文档page上找到合适的动画。

$("nav a").hover(
    function() { 
     $(this).animate({ 
      opacity: .6 
     }, { 
      duration: 100, 
      specialEasing: { 
       opacity: 'linear', 
      }, 
      complete: function() { 

       $(this).addClass("aHover").animate({ 
        opacity: 1 
       }, { 
        duration: 100, 
        specialEasing: { 
         opacity: 'linear', 
        } 
       }); 
      } 
     }); 
    }, function() { 
     $(this).animate({ 
      opacity: .6 
     }, { 
      duration: 100, 
      specialEasing: { 
       opacity: 'linear', 
      }, 
      complete: function() { 

       $(this).removeClass("aHover").animate({ 
        opacity: 1 
       }, { 
        duration: 100, 
        specialEasing: { 
         opacity: 'linear', 
        } 
       }); 
      } 
     }); 
    }); 

hover animate