How else can I write this to rid glitch?

[Spunky]

I have a piece of JQuery:

$('#bkbtnHome').click(function(e){    $('div#m2Map,div#m3Map,div#m4Map,div#m5Map,div#m6Map,div#m7Map,div#m8Map').fadeOut('slow', function(){          $(".m1Details,#AlaskaMini").css("display","block");        $(".m2Details,.m3Details,.m4Details,.m5Details,.m6Details,.m7Details,.m8Details,.noQuery,li.bkbtn").css("display","none");        $('div#m1Map').fadeIn('slow');    });});

Trouble is, I have recently noticed that when I click #bkbtnHome, the div that is currently visible gets pushed down as it is fading out and the div that fades in appears above it. It's just ugly because it pushes it down for a second which actually causes my page to need a scroll bar for a second before it too disappears.

 

Thing is, I know this only occurs because there are multiple divs "fading out" even though the rest of them are not visible. For example:

 

div#m2Map is visible. I click #bkbtnHome. div#m2Map fades out, the other stuff changes their display, div#m1Map fades in. However, #bkbtnHome can also be clicked when div#m3Map is visible. When that too is clicked, it needs to fade out and have the same stuff change its display. Hence why I put it all together. When it is just a single item fading out, this problem doesn't occur. I am pretty sure it is because something that is already invisible is being told to fade out.

 

My question is, what might be a better way to write this to accomplish the same task? I tried adding an if statement like this:

$('#bkbtnHome').click(function(e){    if($('div#m2Map').css("display","block")){        $('div#m2Map').fadeOut('slow',function(){            $(".m1Details,#AlaskaMini").css("display","block");            $(".m2Details,.m3Details,.m4Details,.m5Details,.m6Details,.m7Details,.m8Details,.noQuery,li.bkbtn").css("display","none");            $('div#m1Map').fadeIn('slow');        });    };});

And it does work, but this would require me to write many if statements (or one with many else). Is there another approach I could take to fix this little glitch that would keep it simple/short?

[justsomeguy]

The reason is probably because that callback function that you pass to fadeout will be called once for every matched element, so if you call fadeOut on an element that is already invisible then it might execute the callback immediately, which sets the display to block and starts the fadeIn before the fadeOut has finished. If you want to avoid that then you need to avoid calling fadeOut on something that is already invisible. That doesn't mean you need to copy and paste if statements though, you could just use a loop to loop over the various IDs.

[dsonesuk]

Instead of referencing each unique id ref, give it a class name to referencing instead, then you should be able to use not() with pseudo class ':hidden' similar to

                $('#bkbtnHome').click(function(e) {                    //$('div#m2Map,div#m3Map,div#m4Map,div#m5Map,div#m6Map,div#m7Map,div#m8Map').fadeOut('slow', function() {                    $('.Map_fadeIn_Out').not($('#m2Map:hidden')).fadeOut('slow', function() {                        // $(".m2Details,.m3Details,.m4Details,.m5Details,.m6Details,.m7Details,.m8Details,.noQuery,li.bkbtn").css("display", "none");                        $(".details_hide_show").css("display", "none");                        $(".m1Details, #AlaskaMini").css("display", "block");                        $('div#m1Map').fadeIn('slow');                    });                });

'Map_fadeIn_Out' for maps you wish to fade out and in, 'details_hide_show' for details to show and hide, you then use the ID specifically for styling only that specific element.