移動背景のjQuery

Question

。

矢印のデフォルトのCSSの設定は次のとおりです。デフォルトでitem 1下矢印を配置

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

。

次の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'}); 
});