雙Jover的懸停菜單？

Question

我有一個粗略的滑動菜單如下所示：

http://www.clients.eirestudio.net/ttt/

它的工作原理大部分，但我希望能夠將鼠標懸停在列表和列表不要再逃避。

任何想法？

我的代碼：

/* 
    Sliding Main Menu 
    */ 

    $('ul#side_menu_list').hover(function() 
    { 
     $(this).show(); 
    }); 

    $('span#side_menu').hover(function() 
    { 
     $('ul#side_menu_list').stop().animate 
     ({ 
      left:"-=130px"},150); 

     $(this).stop().animate 
     ({ 
      left:"-=92px"},150); 
     }, 
     function(){ 

      $('ul#side_menu_list').stop().delay(400).animate 
      ({ 
       left:"125px"},150); 
      $(this).stop().animate 
      ({ 
       left:"45px"},150); 
    }); 

Answer 1

我會把他們的包裝內

<div class="popout"> 
    <span id="side_menu">Click</span> 
    <ul id="side_menu_list"> 
     <li><a href="">bingo reviews</a></li> 
     <li><a href="">new bingo sites</a></li> 
     <li><a href="">no deposit bingo</a></li> 
    </ul> 
</div> 

然後作出對 「popuout」 懸停功能類

$('.popout').hover(function() 
    { 
     $(this).stop().animate 
     ({ 
      left:"-=92px"},150); 
     }); 
    }, 
    function(){ 
     $(this).stop().animate 
     ({ 
      left:"45px"},150); 
     }); 
}); 

這裏我會爲單彈出div製作動畫，然後讓它們相應放置t o佈局。 如果你想要的話，你可以繼續動畫它們嗎？ ：P

編輯 那麼你就是（記得有彈出式視窗類是足夠寬，他們裏面動畫）：

$('.popout').hover(function() 
    { 
     $('#side_menu_list').stop().animate({ 
       left:"-=130px" 
       },150); 

     $('#side_menu').stop().animate({ 
       left:"-=92px" 
       },150); 
    }, 
    function(){ 
     $('#side_menu_list').stop().delay(400).animate({ 
       left:"125px" 
       },150); 

     $('#side_menu').stop().animate({ 
       left:"45px" 
       },150); 
});