Question

i have for example a header (140px height) on the web with 5 “li” content. The first 3 of this (A,B,C) open a subheader (50px height) when “.mouseover”, the others 2 (D,E) close all to the begining.

jq(document).ready(function(){
        jq("#A a,#B a,#C a").mouseover(function(){
            jq("#subheader").animate({top:"140px"},"normal");
        });

        jq("#D a,#E a").mouseover(function(){
            jq("#subheader").animate({top:"91px"},"normal");
        });
    });

Until here all is ok, now comes the problem. Depend of which A, B or C is hovered has to do diferent things with the subheader, just at the end of the animation. (open .smenus inside subheader)

        jq("#A a").mouseover(function(){
            jq(".smenu1").slideDown("slow");
            jq(".smenu1 ul").animate({margin:"0px auto"},"slow");
            jq(".smenu1 li").animate({padding:"0 30px 0"},"slow");

        });
        jq("#B a").mouseover(function(){
            jq(".smenu2").slideDown("slow");
            jq(".smenu2 ul").animate({margin:"0px auto"},"slow");
            jq(".smenu2 li").animate({padding:"0 30px 0"},"slow");

        });
        jq("#C a").mouseover(function(){
            jq(".smenu3").slideDown("slow");
            jq(".smenu3 ul").animate({margin:"0px auto"},"slow");
            jq(".smenu3 li").animate({padding:"0 30px 0"},"slow");

        });

This doesn’t work i think because it start loading before finishing the opening of the suheader. so i have to do this animation when the opening is finished.

PD: And now another thing, when for example #A is hovered, and then #B, it has to stop the animation (if is not finished, or just callback), remove others submenus (in this case .smenu1) and replace it whith theirs submenu (in this case .smenu2). #D and #E has to do the same, putting everything back to the begining.

EDITED:

thanks to Simon, I have more or less this: http://jsfiddle.net/PAXqB/4/

the last implementation is to make it with .click() and not with .mouseover() having this 3 cases:

• case 1: Same than mouseover, all opened.
• case 2: Click again the same Main, all have to close like my example.
• case 3: Click on an other Main, close submenu, not suheader, and open the new submenu.

Answer 1

I must say I had to read your question multiple times and I’m not yet sure if I understood you right, but is this what you wanted to achieve? http://jsfiddle.net/PAXqB/

$(document).ready( function() {
    $('ul.main > li').bind('mouseover mouseout', function(e) {
        var t = $(this), i = t.index(), sub = t.find('.sub');
        if(i < 3)
            switch(e.type) {
                case 'mouseover':
                    sub.stop(true).slideDown( function() {
                        $(this)
                            .stop(true)
                            .animate({ margin:"20px 0 0" })
                            .find('li')
                            .stop(true)
                            .animate({ padding:"0 10px 0" });
                    });
                    break;
                case 'mouseout':
                    sub.stop(true).slideUp('fast', function() {
                        $(this)
                            .removeAttr('style')
                            .find('li')
                            .removeAttr('style');
                    });
                    break;
            }
    });
});

I slightly adjusted the animate-to style so it looks a bit smoother on my jsfiddle, but I hope it helps you.