jquery load with fadein and fadeout of content

Question

I am using jquery to fadeout a specific div then I want to fadein new content to that same div. Fading out works fine, but there is no fading in... rather it just 'pops' in immediately without any fade effect.

Here is what I have :

$('#account-info-form').fadeOut('slow', function(){
    $('#tab_account_info').load('/account/ #account-info-form', function() {
        $('#account-info-form').fadeIn('slow');
        // show success toast
        toastr.info('Your profile has been updated.', 'Updated!');
        // reinitialize the form validation stuff
        AccountProfile.init();
    });
});

Answer 1

You are replacing the hidden element with a new visible element. You should instead fade the containing element. Based on your code, it would seem that is #tab_account_info. If for some reason you can't hide #tab_account_info then you should add a wrapper element and fade/load that.

The reason this is happening is that when you use fadeOut an inline style is added which hides the element. When that element is replaced (in this case through load) the inline style is lost.

Another alternative would be to simply hide the new element before calling fadeIn as so:

$('#account-info-form').hide().fadeIn('slow');