jquery - 在点击事件上移动背景 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'});
});