粘滯於當前頁面的JavaScript狀態菜單效果

Question

我爲我的網站導航創建了懸停效果。 http://www.preview.brencecoghill.com/

我有根據需要對各方面接受一個工作的效果 - 我不能讓橙色正方形停留下來對當前所選頁面

• 例如，如果我點擊「聯繫人」，我導航到該頁面，最初橙色塊停留在聯繫鏈接後面 - 但是，如果我再次懸停在「聯繫人」鏈接上，它會導致塊再次隱藏自己。

我該如何使這個效果對於我所在的當前頁面變得粘稠？我相當新的JavaScript - 所以我相信這是相當簡單的 - 但我不知道如何使這項工作。

該網站的總部設在WordPress的，並輸出類菜單上的「.current_page_item」 - 讓我確信，這可能被用來識別菜單項目和停止的JavaScript射擊如果此項目被徘徊過度？

我基於這裏提供的信息技術： http://line25.com/tutorials/how-to-create-a-cool-animated-menu-with-jquery

我貼我已經在這裏我的網站使用JavaScript來幫助你看到我在做什麼：

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

從選擇器中排除當前菜單項類：

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); 
     } 
    ); 
});