jquery - 菜单中的动画停止-显示-隐藏出现问题

Question

问题是我不明白为什么动画子菜单显示不起作用。当我注释掉 '.stop()' 和 '.animate()' 并取消注释 '.css()' 行时，我大致得到了我需要的内容。我不明白为什么 animate 和 stop 不起作用。

我的js部分:

    function sub_menu_disp(a){
        a.children('div')
        .stop()
        .animate({'display':'block'},'slow');
        //.css({'display':'block'});
    };

    function sub_menu_hide(a){
        a.children('div')
        .stop()
        .animate({'display':'none'},'slow');
        //.css({'display':'none'});
    };

    $(document).ready(function(e){
        $('#one,#two')
            .children('div')
            .hide()
            .css({'overflow':'hidden'});

        $('#one,#two').bind('mouseover',function(){
            sub_menu_disp($(this));
        });

        $('#one,#two').bind('mouseout',function(){
            sub_menu_hide($(this));
        });
    });

我的 html 部分:

    <div id='one'>
        <p>level 1</p>
        <div>
            <div>sublevel 1a</div>
            <div>sublevel 1b</div>
            <div>sublevel 1d</div>
        </div>
    </div>
    <hr />
    <div id='two'>          
        <h5>level 2</h5>
        <div>
            <div><a href='javascript:alert("hello world");'>js alert</a></div>
            <div><a href='http://facebook.com'>facebook             </a></div>
            <div><a href='http://twitter.com'>twitter               </a></div>
            <div><a href='http://google.com'>google                 </a></div>
        </div>
    </div>

我在这里保留了完整的示例:http://jsfiddle.net/x382x/1/

提前致谢。

Answer 1

从最终用户的角度来看 - 悬停是一个坏主意:您想要给访问者留下深刻印象的意图可能会变成“一种“不稳定”的体验!”
使用点击!
我可以向您推荐类似的东西吗？

DEMO

$('.cont').hide();
$('.el>*').click(function() {
    var d = $(this).next('.cont');
    check = (d.is(':visible')) ? d.slideUp() : ($('.cont').slideUp()) (d.slideDown());
});

<小时/>如果您仍然想使用“悬停”功能...
只需更改第 2 行:

$('.el>*').mouseenter(function() {