Move background on click event jQuery
<p>I have this HTML:</p>

<pre><code>&lt;ul id="nav"&gt;
  &lt;li id="menu1"&gt;item 1&lt;/li&gt;
  &lt;li id="menu2"&gt;item 2&lt;/li&gt;
  &lt;li id="menu3"&gt;item 3&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="arrow"&gt;&amp;nbsp;&lt;/div&gt;
</code></pre>

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

<p>The default CSS setting for the arrow is:</p>

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

<p>Which places the arrow under <code>item 1</code> by default.</p>

<p>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.</p>

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

<p>How do I fix this?</p>
