Fade In div с содержимым A, и Fade In тот же div с содержимым B

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

Таким образом, эффект произойдет только после того, как вы получите свои данные, избегая любого промежутка времени для ожидания ответа данных.

Answer 2

На данный момент это не произойдет, потому что fadeIn не начнется, пока не закончится fadeOut!