jquery懸停動畫問題

我正在使用jquery在我的導航菜單上創建懸停效果。我jQuery是如下：jquery懸停動畫問題

$(".hoverMenu").css({"opacity":"0"}); 

     $("#menu-nav li:nth-child(2) a").hover(function(){ 
      $(".hoverMenu").stop().show().animate({ 
       top: '88', 
       opacity: '1' 
      }, 500); 
     }, function(){ 
      $(".hoverMenu").stop().animate({ 
       top: '-247', 
       opacity: '0' 
      }, 500); 
     });

當你將鼠標懸停在第二個菜單項，一類hoverMenu的格動畫下來，並增加其透明度，直到其完全可見。我遇到的問題是在hoverMenu動畫關閉之後，我希望能夠將鼠標懸停在hoverMenu中的各個鏈接上。因爲我在menuNav上懸停（hovermenu引用了一系列列表項目和錨點），hoverMenu啓動備份。我想修改我的jquery，所以當你將鼠標懸停在.hovermenu上時，它不會回放。

如果這沒有意義，我會扔在一起jsfiddle，但我覺得這是一個相當普遍的問題。總結一下，因爲我在＃menu-nav上懸停，hoverMenu開始動畫;但我希望hoverMenu保持放置，直到我將鼠標停留在hoverMenu和＃menu-nav

來源

2011-08-02 JCHASE11

有一個非常類似的問題，這個浮動，我發佈了一個答案，我相信，但我現在似乎無法找到它。我相信你需要做的就是在你將鼠標懸停在主「li」上時解除綁定，以便你可以自由移動下拉菜單。 –

你的問題似乎與此類似：http://stackoverflow.com/questions/6877178/jquery-menu-works-well-on-hover-but-sub-menu-disappears-on-click，因爲他們的菜單顯示但只是在點擊消失。 –

使hoverMenu成爲＃menu-nav的子項，並且當您將鼠標懸停在它上面時，它仍然被視爲懸停在#menu上-dav，因爲它是一個孩子。

來源

2011-08-02 21:17:35 Ariel

＃menu-nav是由wordpress動態生成的，所以我無法將其添加爲小孩，我可以嗎？ – JCHASE11

@ JCASE11爲什麼你不能？只要它在HTML中的正確位置生成。如果沒有其他的你可以使用jQuery來移動它。 – Ariel

夠公平的，謝謝！我得到了它的工作 – JCHASE11

這是一個相當普遍的問題，我喜歡的方法是簡單地將子菜單添加爲主項目的子項。這樣，子菜單就是其上的hover項目的一部分，所以您進入子菜單的鼠標不會觸發離開事件。這通常是有效的，因爲無論如何子菜單通常是絕對定位的，所以將它作爲另一個項目的子項添加是微不足道的。

來源

2011-08-02 21:19:51

jquery懸停動畫問題

回答

相關問題