加载后的jQuery ajax slidedown

Question

我有一个缩略图网格，每个缩略图都链接到它自己的帖子页面。 单击时，下面的容器div向下滑动并使用ajax加载内容。

问题：当我第一次单击缩略图时，它不能顺滑滑动。 内容随即出现。 但是，当我第二次单击另一个缩略图时，容器会随着新内容的平滑滑动。 似乎它第一次不向下滑动的原因是因为在调用slidedown时div容器仍然为空。

我该如何解决？ 如果我将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());
});