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