Question

问题在于我无法弄清楚为什么动画子菜单显示不起作用。当我注释掉'.stop（）'和'.animate（）'并取消注释'.css（）'行时，我大致得到了我需要的东西。我不明白为什么动画和停止不起作用。

我的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

我认为animate仅适用于数字css属性。您可以使用show('slow')和hide('slow')。

Working Demo

$(document).ready(function(e) {
    $('#one,#two').children('div').hide().css({
        'overflow': 'hidden'
    });
    $('#one,#two').hover(function() {
        $(this).children('div').stop(true, true).show('slow');
    }, function() {
        $(this).children('div').stop(true, true).hide('slow');
    });
});

Answer 2

从最终用户的角度来看 - 悬停是一个坏主意：你打算给访问者留下深刻印象的意图可能会成为一种“摇摇欲坠”的体验！
使用点击！
我可以建议你这样吗？

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() {

在动画中停止显示 - 隐藏在菜单中

2 个答案:

DEMO