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

在单击事件jQuery上移动背景

1 个答案: