淡出内容为A的div，淡入内容为B的同一个div

Question

我有以下几点：

$(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;
    });
});

这样几乎可以。问题是…效果不流畅。我的意思是，首先淡出内容A，然后保持空白，然后淡入内容B。

我想要的是减轻这种影响，以便当他确实快要消失时，他开始淡入，以便使效果平滑。

关于下面的代码如何实现？

非常感谢，MEM

Answer 1

试试这个：

$(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;
    });
});

因此，只有在检索到数据后才会产生效果，从而避免了等待数据响应的时间间隔。