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

在这里，我将为单个弹出框设置动画，并将它们相应地放置在布局中。 如果你想要的话，你当然可以分别为它们制作动画吗？ ：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);
});