Question

I have this 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>

The list has the CSS setting: display: inline and under the active menu item is an arrow that points to the active menu item.

The default CSS setting for the arrow is:

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

Which places the arrow under item 1 by default.

I created the following jQuery code but it doesn’t seem to work. Nothing happens when I click a link and the arrow doesn’t move.

$(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 );
  });
});

How do I fix this?

Answer 1

you should use this plugin: http://www.protofunc.com/scripts/jquery/backgroundPosition/

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