移動背景上的點擊事件jQuery的

Question

我有這樣的HTML：

<ul id="nav"> 
    <li id="menu1">item 1</li> 
    <li id="menu2">item 2</li> 
    <li id="menu3">item 3</li> 
</ul> 

<div id="arrow">&nbsp;</div> 

名單有CSS設置：display: inline和活動菜單項下是指向活動的菜單項的箭頭。

的默認設置CSS的箭頭是：

#arrow { 
    background: url('./arrow-up.png') no-repeat 10px 0; 
} 

它默認放置item 1下面的箭頭。

我創建了以下jQuery代碼，但它似乎不工作。當我點擊鏈接並且箭頭不移動時，沒有任何反應。

$(document).ready(function(){ 

    $("#menu1").click(function(){ 
     $("#arrow").animate({ 
      background: url('./arrow-up.png') no-repeat 10px 0 
     }, 1500); 
    }); 

    $("#menu2").click(function(){ 
     $("#arrow").animate({ 
      background: url('./arrow-up.png') no-repeat 90px 0 
     }, 1500); 
    }); 

    $("#menu3").click(function(){ 
     $("#arrow").animate({ 
      background: url('./arrow-up.png') no-repeat 180px 0 
     }, 1500); 
    }); 
}); 

我該如何解決這個問題？

Answer 1

你應該使用這個插件：http://www.protofunc.com/scripts/jquery/backgroundPosition/

$('#menu1').click(function(){ 
    $('#arrow') 
     .animate({backgroundPosition:'10px 0'}); 
});