jQuery ajax slidedown после загрузки

Question

У меня есть сетка миниатюр, каждая из которых ссылается на собственную страницу с сообщением. При щелчке контейнер div ниже слайдов вниз и загружает содержимое с помощью ajax.

Проблема: когда я нажимаю на миниатюру в первый раз, она не скользит вниз плавно. Содержимое просто появляется. Однако, когда я нажимаю второй раз на другой миниатюре, контейнер соскальзывает и плавно перемещается с новым контентом. Похоже, причина, по которой он не сползает в первый раз, заключается в том, что контейнер div остается пустым, когда вызывается slidingown.

Как исправить это? Если я устанавливаю фиксированную высоту в div, то он работает хорошо, но мне нужна высота, чтобы приспособиться к каждой вытащенной странице соответственно.

Большое спасибо!

Код:

var hash = window.location.hash.substr(1); 
var href = $('.work-item a').each(function(){ 
    var href = $(this).attr('href'); 
    if(hash==href.substr(0,href.length-5)){ 
     var toLoad = hash+'.html #content-post > *'; 
     $('#content').load(toLoad) 
    }           
}); 

$('.work-item-hover').click(function(){ 

    var toLoad = $(this).attr('href')+' #content-post > *'; 
    $('#content-post').slideUp('normal',loadContent); 
    $('#load').remove(); 
    $('.content-post-wrap').append('<span id="load">LOADING...</span>'); 
    $('#load').fadeIn('normal'); 
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
    function loadContent() { 
     $('#content-post').load(toLoad,'',showNewContent()) 
    } 
    function showNewContent() { 
     $('#content-post').slideDown('slow',hideLoader()); 
    } 
    function hideLoader() { 
     $('#load').fadeOut('normal'); 
    } 
    return false; 
});  

Answer 1

Вы можете сделать это слайд после того, как Ajax загружает содержимое с помощью метода .ajaxComplete(). Что-то вроде этого:

$(document).ajaxComplete(function(){ 
    $('#content-post').slideDown('slow',hideLoader()); 
});