Question

First a little code =] :

css:

.mainnav li:hover{
   background:url("/css/images/nav.png") no-repeat scroll 0 0 transparent;
}

script:

$(document).ready(function() {

  $('.mainnav li').mouseover(function() {
    $(this).stop().animate(????,400)
  });
});

html:

<ul class="mainnav">
  <li>
   <a href="/Home.aspx">home</a>
  </li>
  ..
  ..
</ul>

What I want is that when the mouse gets over an other li the image doesnt move/pop right away, rather it’ll move slowly(“animated”) to there..

Thanks.

Answer 1

To animate background position you need a plugin as jquery doesn’t do it out of the box. Usage on the linked page.