Как плавно сменить контент по событию click?

Question

[Александр]

Добрый день!
Имеется 3 кнопки (ссылки), при нажатии на которые аяксом в div подгружаются файлики с контентом.
Плавное появление контента я реализовал.
Я новичок в js, подскажите, пожалуйста, как сделать плавное затухание для смены контента?
Задача в том, чтобы при нажатии на кнопки происходило сначала затухание текущего открытого файла, затем плавное появление нового.

<div id="content">
            <div id="page"></div>
        </div>

<a href="#" id="btn1">Первая</a>
<a href="#" id="btn2">Вторая</a>
<a href="#" id="btn3">Третья</a>

$(document).ready(function () {
    $('#btn1').click(function () {
        $('#page').hide();
        $.ajax({
            url: "content/page1.php",
            cache: false,
            success: function (html) {
                $('#page').html(html);
                $('#page').fadeIn(1500);
            }
        });
    });
    $('#btn2').click(function () {
        $('#page').hide();
        $.ajax({
            url: "content/page2.php",
            cache: false,
            success: function (html) {
                $('#page').html(html);
                $('#page').fadeIn(1500);
            }
        });
    });
    $('#btn3').click(function () {
        $('#page').hide();
        $.ajax({
            url: "content/page3.php",
            cache: false,
            success: function (html) {
                $('#page').html(html);
                $('#page').fadeIn(1500);
            }
        });
    });
});

Answer 1

[Dark Hole]

Вместо hide использовать fadeOut?

Comments

[Александр]

Спасибо за ответ!
Не получается. Функция ведет себя примерно так - сначала появляется контент, потом с ним происходит анимация. При fadeOut моментально появляется новый контент и уже с ним происходит анимация (плавно исчез->плавно пояился). Может я что то не так делаю?

Answer 2

[Александр]

Получилось вот так:

$("#btn1").click(function () {
        $("#page").fadeOut(500, function () {
            $.ajax({
                url: "content/whoweare.php",
                cache: false,
                success: function (html) {
                    $("#page").html(html);
                    $("#page").fadeIn(1500);
                }
            });
        });
    });

Спасибо за наводку