Question

I am using this code here to toggle a specific class of content within a set of tabs. Here is a screenshot:

The Fade-in, fade-out effect works great, although I can see the new page “loading” after the fade-in effect of that new page has already started. And that’s set on slow transition! It seems as if the fading effect is not tied at all to the page load, which I think is throwing things off. Is there a way to make the transition more smooth?

Here’s the code:

jQuery(document).on("click",".nav-tab", function(e){ 
    e.preventDefault();
jQuery('.page-form').fadeOut('slow').load(jQuery(this).attr('href') + ' .page-form');
jQuery('.page-form').fadeIn('slow').load(jQuery(this).attr('href') + ' .page-form');
});

Answer 1

Your second call:

jQuery('.page-form').fadeIn('slow').load(jQuery(this).attr('href') + ' .page-form');

Has to happen in a finish-callback to the first call, like this:

jQuery('.page-form').fadeOut('slow')
    .load(jQuery(this).attr('href') + ' .page-form', function() {
        jQuery('.page-form').fadeIn('slow')
            .load(jQuery(this).attr('href') + ' .page-form');
        });

The reason is that most jQuery functions work asynchronously: You probably assumed the call would block until the content is loaded, but that’s not the case – the call returns immediately, and the content gets loaded in the background. This causes the strange effects you’re seeing – the div is faded in and out and loaded twice, all at the same time.

Edit: Btw, why exactly are you doing a second load() after the first one? This looks a bit strange to me – I assume you want to have the element fade out, then load new content, then fade in again?

Also note that fadeOut() accepts a callback similar to load() – so if you want to have the fade finish before the loading starts, place the first load() inside a callback and pass that to the fadeOut()-call.