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

Question

Hi All,

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')){
        $('.level2').delay(2300).fadeOut(250);
    }
    })

Any help is grealty appreciated, Thanks

Answer 1

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.

Answer 2

try this:

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