Fade out a div with content A, and Fade In the same div with content B

Question

I have the following:

$(function() {
    $('.ajaxloader').click(function(event) {
        var target = $(this).attr('href');
        window.location.hash = target;
        $('#conteudoInscricao').fadeOut('slow', function() {
            $.ajax({
                url: target,
                    success: function(data) {
                        $('#conteudoInscricao').html(data);
                        $('#conteudoInscricao').fadeIn('slow');
                    }
            });
        });
        return false;
    });
});

This works almost ok. The thing is... the effect is not smooth. I mean, first it fades out the content A, then it stays blank, and then it fades IN content B.

What I would like is to ease the effect so that, while he is fading out really near the end, he starts to fade in so that the effect could be smooth.

How can that be achieve regarding the code below?

Thanks a lot in advance, MEM

Answer 1

Try this:

$(function() {
    $('.ajaxloader').click(function(event) {
        var target = $(this).attr('href');
        window.location.hash = target;
        $.ajax({
            url: target,
            success: function(data) {
                $('#conteudoInscricao')
                    .fadeOut('slow', function() {
                        $(this).html(data).fadeIn('slow');
                    });
            }
        });
        return false;
    });
});

So the effect will happen only after you have retrieved your data, avoiding any time gap to wait the data response.

Answer 2

At the moment it wont, because the fadeIn wont start until the fadeOut has finished!