jquery animate, but not specific li class

Question

Hi all, I'm using jquery to change/animate bg positions of a menu item, but I need it to not do anything if the li class is "active", but I can't seem to figure out how to use the not selector (or even if it's appropriate for this case?). Here's the code:

<div id="menuHolder">
  <ul>
    <li class="active"><a href="/">menu 1</a></li>
    <li><a href="/">menu 2</a></li>
    <li><a href="/">menu 3</a></li>
  </ul>
</div>

Here's the jquery:

$('#menuHolder ul li a').css({ backgroundPosition: "0px -145px" }).mouseover(function(){
  $(this).stop().animate({ backgroundPosition:"(0px 0px)" }, { duration: 500 });
}).mouseout(function() {
  $(this).stop().animate({ backgroundPosition:"(0px -145px)" }, { duration: 500 });
});

^^ this makes all the menu item bg position change - which works well, I just need it to do that on all of them, except for #menuHolder ul li.active a

Any help would be appreciated :)

Answer 1

try $(this).filter(':not(.active)')

or you could use (inside the mouseover) if (!$(this).hasClass('active')) {