1

我有一个缩略图网格，每个都链接到它自己的帖子页面。单击时，下面的容器 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;
});
4

1 回答 1

0

您可以在 ajax 使用 .ajaxComplete() 方法加载内容后使其滑动。像这样的东西：

$(document).ajaxComplete(function(){
   $('#content-post').slideDown('slow',hideLoader());
});
于 2013-06-01T01:53:51.417 回答