.animate（）不工作？

Question

不能讓我的背景圖片」位置動畫

$(function() { 
$('#nav1').bind('click',function(event){ 
     $('ul.nav').stop().animate({backgroundPosition: 'right top'}, 1000); 
}); 
    $(function() { 
    $('#nav2').bind('click',function(event){ 
      $('ul.nav').stop().animate({backgroundPosition: 'right 38px'}, 1000); 
}); 
    $(function() { 
    $('#nav3').bind('click',function(event){ 
      $('ul.nav').stop().animate({backgroundPosition: 'right 76px'}, 1000); 
}); 
    $(function() { 
    $('#nav4').bind('click',function(event){ 
      $('ul.nav').stop().animate({backgroundPosition: 'right 114px'}, 1000); 
}); 

和HTML代碼是

<ul class="nav"> 
<li><a href="#what" id="nav1">what</a></li> 
<li><a href="#who" id="nav2">who</a></li> 
<li><a href="#portfolio" id="nav3">portfolio</a></li> 
<li><a href="#contact" id="nav4">contact</a></li> 
</ul> 

我試着不使用像素像這樣{backgroundPosition： '0 38'}，但它仍然不動畫它只是改變了位置

還有另一個問題。我重複菜單中的每個項目的jquery代碼，你可以使它在一個函數中，位置每個項目垂直移動38px。 謝謝，

Answer 1

這不是你。

jQuery本身不支持背景位置動畫。然而，有一個好的插件： http://www.protofunc.com/scripts/jquery/backgroundPosition/

下面是你要的功能：

$(function() { 
    $('ul.nav a').each(function(i, elem) { 
     $(elem).bind('click', function(event) { 
      event.preventDefault(); 
      var offset = i * 38; 
      $(this).stop().animate({backgroundPosition: '0 ' + offset + 'px'}, 1000); 
     }); 
    }); 
}); 

Answer 2

我推薦使用CSS3 transitions和jQuery.CSS()觸發過渡。

Answer 3

'right 38px'無效的值爲background-position。修復它，它應該工作。