Question

The problem is that I can’t figure out why the animated sub-menus displaying are not working.
When I comment out the ‘.stop()’ and ‘.animate()’ and uncomment the ‘.css()’ line, I roughly get what I need. I don’t understand why the animate together with stop are not working.

My js portion :

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

My html portion:

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

I have kept my complete example here : http://jsfiddle.net/x382x/1/

Thanks in advance.

Answer 1

Looking from an end-user perspective – Hover is a bad idea: Your intent to impress the visitor may become ‘a “shaky” experience!’

USE CLICK!
May I suggest you something like this?

DEMO

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

---

If you still want to use the ‘hover’ ability…
just change line 2:

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