带有 JQuery 的双悬停菜单？

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 设置动画，并根据布局放置它们。 如果您愿意，您当然仍然可以单独为它们设置动画？ :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);
});