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

问题

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

回答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.

回答2:

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

来源：https://stackoverflow.com/questions/4289250/fade-out-a-div-with-content-a-and-fade-in-the-same-div-with-content-b