当前页面的粘滞状态，用于javascript菜单效果

Question

I've created a hover effect for my website navigation. http://www.preview.brencecoghill.com/

I have got the effect to work as desired for all aspects accept one - I can't get the orange square to stay down for the currently selected page

• for example if I click on "Contact", I am navigated to that page and initially the orange block stays down behind the contact link - however, if I hover over the "contact" link again it causes the block to hide itself again.

How can I make this effect sticky for the current page that I am on? I'm fairly new to javascript - so I'm sure this is something fairly straight forwards - but I can't figure out how to make this work.

The website is based in Wordpress, and is outputting a class ".current_page_item" on the menu - so I am sure that this could be used to identify the menu item and stop the javascript firing if this item is hovered over?

I based the technique on the details available here: http://line25.com/tutorials/how-to-create-a-cool-animated-menu-with-jquery

I've pasted the javascript I have used on my website here to help you see what I'm doing:

jQuery(document).ready(function () {
    jQuery("#main-nav > li > a").addClass("js");
    jQuery("#main-nav > li > a").hover(
      function () {
          jQuery(this).stop(true, true).animate({ backgroundPosition: "(0 -20)" }, 200);
          jQuery(this).animate({ backgroundPosition: "(0 -5px)" }, 150);
      },
      function () {     
        jQuery(this).animate({ backgroundPosition: "(0 -100px)" }, 200);
      }
    );
});

Answer 1

exclude current-menu-item class from selector:

jQuery(document).ready(function () {
    var nav=jQuery("#main-nav > li:not(.current-menu-item) > a");
    nav.addClass("js");
    nav.hover(
      function () {
          jQuery(this).stop(true, true).animate({ backgroundPosition: "(0 -20)" }, 200);
          jQuery(this).animate({ backgroundPosition: "(0 -5px)" }, 150);
      },
      function () {   
        jQuery(this).animate({ backgroundPosition: "(0 -100px)" }, 200);
      }
    );
});