Question

I need to disable the animation/fade on a link(‘li’) when it is the current page.

My HTML

<div id="hp-navigation-second">
<ul>
  <li class="works current"><a href="javascript:void(0);return false;" title="How it Works">
    <h1>How it Works</h1></a></li>
  <li class="benefits"><a href="member-benefits.html" title="Member Benefits">
    <h1>Member Benefits</h1></a></li>
  <li class="start"><a href="get-started.html" title="Become a member">
    <h1>Become a Member</h1></a></li>
  <li class="tours"><a href="tour.html" title="Take a tour">
    <h1>Take a Tour</h1></a></li>              
</ul>

My jQuery

<script type="text/javascript">
$(document).ready(function () {
    $("#hp-navigation-second li").hover( function() {
      $(this).stop().animate({"backgroundColor":"#0E5B89"},  "medium");
    },function() {
      $(this).stop().animate({"backgroundColor":"#a6a6a6"},  "slow");
    });
});
</script>

Answer 1

If I understand what you’re asking: you do not want to run the animation if the LI in question has the “current” css class name.

You can use the .not() method to filter out the current node (as below):
$(“#hp-navigation-second li”).not(“.current”)

You could also use the :not selector directly:
$(“#hp-navigation-second li:not(.current)”)

Here is an example of the first one:

$(document).ready(function () { 
 $("#hp-navigation-second li").not(".current").hover(function() {       
   $(this).stop().animate({"backgroundColor":"#0E5B89"}, "medium"); },function() { 
   $(this).stop().animate({"backgroundColor":"#a6a6a6"}, "slow"); 
 }); 
});