Question

I have a pop-up submenu that when you hover your mouse over the parent <li> each child <li> fades in individually. And when your mouse leaves, the entire can just fade out at once.

So far, I can fadeIn them individually using really bad jQuery code, but it only fires once. And the fadeOut has never worked. It never worked when I just had the entire pop-up menu fading in at the same time.

Here it is in the current state: http://www.fixxed.net/test/pg/carousel/profiles.html

Here’s the jQuery code:

$('#menu li').hover(
        function () {
            //show its submenu

            $('ul .1', this).hide().stop(true, true).fadeIn(700);
            $('ul .2', this).hide().stop(true, true).delay(300).fadeIn(700);
            $('ul .3', this).hide().stop(true, true).delay(600).fadeIn(700);
            $('ul .4', this).hide().stop(true, true).delay(900).fadeIn(700);
            $('ul .5', this).hide().stop(true, true).delay(1200).fadeIn(700);
            $('ul .6', this).hide().stop(true, true).delay(1500).fadeIn(700);

        }, 
        function () {
            //hide its submenu
            $('ul', this).stop(true, true).fadeOut(700);            
        }

Here’s a simplified version of the HTML:

<li class="about"><a href="#"></a>
       <ul>
            <li class="6"><a href="../paul-gregory-photography-bio.html">BIO</a></li>
            <li class="5"><a href="../paul-gregory-photography-clients.html">CLIENTS</a></li>
            <li class="4"><a href="#">THE SESSION</a></li>
            <li class="3"><a href="../paul-gregory-photography-pricing.html">Pricing</a></li>
            <li class="2"><a href="#">THINGS PAUL SAYS</a></li>
            <li class="1" style="padding-bottom:5px"><a href="#">Interview</a></li>
       </ul>
</li>  

I believe the reason it is not fading out when the mouse leaves is because of the CSS. There’s a lot going with the CSS since it’s a pop-up menu instead of a drop-down but here it all is (except for the sprite stuff):

#menu li ul li a {
    display:block;
    text-decoration:none;
    text-align:left;
    width:100%;
    height:100%;
    background:#000;
}
#menu ul {
    padding:0;
    margin:0;
    list-style-type: none;
}
#menu ul li {
    float:left;
    position:relative;
    display:inline;
}
#menu ul li ul {
    visibility:hidden;
    position:absolute;
    color:#FFFFFF
}
#menu table {
    border-collapse:collapse;
    margin:0;
    padding:0;
    font-size:1em;
    margin:-1px;
}
#menu ul li:hover a, #menu ul li a:hover {
    color:#000;
}
#menu ul li:hover ul, #menu ul li a:hover ul {
    visibility:visible;
    bottom:26px;
    left:5px;
}
.display {
    display:block;
    width:150px;
    height: 18px;
    clear:both;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    font-style:italic
}
#menu ul li:hover ul li, #menu ul li a:hover ul li {
    display:block;
    width:150px;
    height: 18px;
    clear:both;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    font-style:italic
}
#menu ul li:hover ul li ul, #menu ul li a:hover ul li a ul {
    visibility:hidden;
    position:absolute;
}
#menu ul li:hover ul li a, #menu ul li a:hover ul li a {
    display:block;
    color:#DAC4AF;
    width:100%;
    padding-left:0px;
}
#menu ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover {
    color:#FFF;
}
#menu ul li:hover ul li:hover ul, #menu ul li a:hover ul li a:hover ul {
    visibility:visible;
    left:210px;
    bottom:0;
}
#menu ul li:hover ul li:hover ul li a, #menu ul li a:hover ul li a:hover ul li a {
    color:#000;
}
#menu ul li:hover ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover ul li a:hover {
    color:#000;
}
#menu ul li:hover ul.left, #menu ul li a:hover ul.left {
    left:-105px;
}
#menu ul li:hover ul li:hover ul.left, #menu ul li a:hover ul li a:hover ul.left {
    left:-210px;
    width:209px;
}
.menu li {
    text-indent:-9999px;
    display:inline;
    float:left;
    position:relative
}
.menu li a {
    background:url(assets/menu.png) no-repeat;
    width:100%;
    height:100%;
    display:block;
}

Answer 1

Check out this fiddle

A few things changed, but i think i’ll make sense when you look at it.

$("#fader").hide();     

    $('#menu li').hover(
        function () {
            //show its submenu
            $('ul',this).show() //Show the sub ul you hide in the mouse out
            $('ul .1', this).hide().stop(true, true).fadeIn(700);
            $('ul .2', this).hide().stop(true, true).delay(300).fadeIn(700);
            $('ul .3', this).hide().stop(true, true).delay(600).fadeIn(700);
            $('ul .4', this).hide().stop(true, true).delay(900).fadeIn(700);
            $('ul .5', this).hide().stop(true, true).delay(1200).fadeIn(700);
            $('ul .6', this).hide().stop(true, true).delay(1500).fadeIn(700);

        }, 
        function () {
            //hide its submenu
            $('ul', this).fadeOut(700);            
        }
    );

The reason you werent seeing the fadeout was because in your CSS you had visibily sent to hidden on mouseout. So i overwrote that rule with.

#menu ul li ul, #menu ul li:hover ul, #menu ul li a:hover ul {visibility:visible; bottom:26px; left:5px; display:none;}

Needs cleanup obviously, but i hope it helps