How do I get one DIV to fadeOut() before another DIV, using JQuery?

How do I get DIV(.level2) to start executing the fadeOut() only if DIV(.level3) is hidden?

What happens at the moment is DIV(.level2) fades out before DIV(.level3) on my menu...looks really messed up.

Please see code below:

$('.level3').live('mouseleave', function(){

    $('.level3').delay(2300).fadeOut(250);

    if($('.level3:hidden')){
        $('.le开发者_运维技巧vel2').delay(2300).fadeOut(250);
    }
    })

Any help is grealty appreciated, Thanks

Nooo, why like that? Use callback! First hide level3, and add callback that will hide level2:

$('.level3').fadeOut(250, function(){$('.level2').fadeOut(250);});

Callback function function(){$('.level2').fadeOut(250);} which hides .level2 will be called only when $('.level3').fadeOut() is completed, in other words, when .level3 is hidden.

Also take a look at >THIS<. it will help you understand how jQuery API works.

try this:

$('.level3').live('mouseleave', function(){
    if($('.level3:hidden')){
        $('.level2').fadeOut(250);
    }
    else{
       $('.level3').fadeOut(250);
       $('.level2').delay(250).fadeOut(250);
    }
})