jQuery FadeIn / fadeOut无法正常运行

Question

I have several divs that I want to have fade in and out depending on a nav panel. I am running into an issue with two of the divs, but the others work fine so I am not sure what is happening.

here is the jQuery code, here the two divs that are wacky have been singled out, the real code generalizes it to work for all divs:

    $('#behind_the_lens').click(function() {
                          $('#gallaries-page').fadeOut(0);
                          $('#behind_the_lens-page').fadeIn(750);
                          $('#pricing-page').fadeOut(750);
                         });
    $('#pricing').click(function() {
                          $('#pricing-page').fadeIn(750);
                          $('#behind_the_lens-page').fadeOut(750);
                         });

When the first function runs #pricing-page just hides, no fading and #behind_the_lens-page does fade.

When the second function runs #pricing-page waits for #behind_the_lens-page to fade out, then it instantly shows.

this does not happen for any other combination of divs so it is very strange to me.

as for the contents of these divs, one #pricing-page uses a table and the other uses a floating layout. but there layouts types are not unique from other divs.

In summary, why is it working this way for these divs but not the others? furthermore, why is it doing this at all?

Edit: was able to come up with a fiddle here that shows the problem.

Answer 1

You are fading in and fading out simultaneously. Watch the scrollbar, your "clicked" page is appearing as the currently visible is disappearing, and jumps up into position after the visible completely disappears (display:none).

Use the complete callback on fadeOut so that fading in happens after fading out finishes.

https://jsfiddle.net/u3u8jsqr/2/

JS

if (thisID != visibleID) {
    $(visibleID).fadeOut(750, function () {
        $(thisID).fadeIn(750);
    });                                
}