爲什麼這個jquery不能正常工作？

Question

在這個網站的導航：[鏈接刪除]

我試圖用喬納森·斯努克的jQuery的背景圖像動畫http://snook.ca/archives/javascript/jquery-bg-image-animations/

使用的代碼：

HTML

<div class="navigation"> 
      <ul class="navigation"> 
       <li class="about-us"><a href="#">about us</a></li>                
       <li class="services"><a href="#">services</a></li> 
       <li class="products"><a href="#">products</a></li> 
       <li class="news"><a href="#">news</a></li> 
       <li class="contact"><a href="#">contact</a></li> 
      </ul> 
     </div><!--/navigation--> 

CSS：

div.navigation { 
    display: block; 
    height: 47px; 
} 

ul.navigation li { 
    float: left; 
    display: block; 
    text-indent: -9999px; 
    background: url(../i/menu-sprite.jpg) no-repeat; 
} 

ul.navigation li a { display: block; height: 47px;} 

ul.navigation li.about-us { width: 197px; background-position: 0 0; } 
ul.navigation li.about-us:hover { width: 197px; background-position: 0 -47px; } 

ul.navigation li.services { width: 200px; background-position: -197px 0; } 
ul.navigation li.services:hover { width: 200px; background-position: -197px -47px; } 

ul.navigation li.products { width: 210px; background-position: -396px 0; } 
ul.navigation li.products:hover { width: 210px; background-position: -396px -47px; } 

ul.navigation li.news { width: 152px; background-position: -606px 0; } 
ul.navigation li.news:hover { width: 152px; background-position: -606px -47px; } 

ul.navigation li.contact { width: 183px; background-position: -758px 0; } 
ul.navigation li.contact:hover { width: 183px; background-position: -758px -47px; } 

jQuery：

$(function(){ 
$('ul.navigation li a') 
    .css({backgroundPosition: "0 0"}) 
    .mouseover(function(){ 
     $(this).stop().animate(
      {backgroundPosition:"(0 -47px)"}, 
      {duration:500}) 
     }) 
    .mouseout(function(){ 
     $(this).stop().animate(
      {backgroundPosition:"(0 0)"}, 
      {duration:500}) 
     }) 
}); 

任何意見將不勝感激。

Answer 1

我沒有看到適用於您的ul.navigation li a的背景圖像。但是，您正在嘗試設置和設置背景位置樣式的動畫效果。

Answer 2

我不知道什麼是不工作，但我假設你的jquery不是動畫的background position這是因爲你已經給你的css中的hover狀態覆蓋動畫，並立即移動你的背景位置......
在JavaScript另一件事嘗試使用，因爲你有background position爲.about-us，而不是.about-us a

$('ul.navigation li.about-us').stop().animate(
       {backgroundPosition:"(0 -47px)"}, 
       {duration:500}) 

但在你的jQuery代碼你又正在重置懸停過於'0 0'背景位置......所以我會建議你刪除css:hover狀態

Answer 3

您必須更換選擇：

$(this).stop().animate(

有：

$(this).parent('li').animate(

因爲停止（）選擇一個標籤，你需要選擇L1標籤。

Answer 4

jquery中的背景動畫經常被忽視的一件事是他們需要一個額外的插件（儘管它很小），以使其工作。 該插件可在http://plugins.jquery.com/project/backgroundPosition-Effect找到。