Загружать контент с помощью AJAX и анимации - jQuery

Question

Мне нужна твоя помощь!

Мне нужна помощь, чтобы добавить анимацию для моего кода.Теперь это работает следующим образом: - нажмите на ссылку -> добавить текст -> нажмите на другую ссылку -> исчезнуть текущий текст -> добавить новый текст.

То, что я хочу, выглядит следующим образом - Нажмите на ссылку -> #content анимации до xx: px (в зависимости от загружаемой высоты содержимого) -> затухание текста -> Нажмите на ссылку -> текущий текст исчезает и #content оживляет вверх -> #content оживляет до xx: px (в зависимости от загружаемой высоты содержимого) -> исчезает в тексте

Здеськод до сих пор ...

Обновлен вот jsfiddle - но функция ajax не работает http://jsfiddle.net/jelm/7zLW5/2/ Или вы можете взглянуть на мойтестовая страница http://landetdigital.se/olaselmen/

$(document).ready(function() {  
    $('.menu li a').click(function() {

       $('#contentHolder').fadeOut("fast");
        var targetPage = $(this).attr('href');

    setTimeout(function() {
        $('#content').load(targetPage, function() {
            $('#contentHolder').fadeIn("slow");
        });
    });

 return false;
});
});

Answer 1

Чтобы получить правильную высоту нового контента, я бы поместил только что загруженный контент в скрытый тег div и получил его высоту.Затем анимируйте показанный div в нужную высоту и удалите временную.

Получение высоты div с помощью:

.css({ display: 'none' });

.. не будет работать, используйте:

.css({'position':'absolute','visibility':'hidden', 'display':'block'});

.. вместо.

Answer 2

Этого можно достичь, используя обратные вызовы внутри fadeIn () и fadeOut ().

Если, например, вы хотите что-то сделать после $('#contentHolder').fadeIn('slow'), вы можете сделать это следующим образом:

$('#contentHolder').fadeIn('slow',function(){ 
    alert('#contentHolder was faded in!');
})