如何在滑动Div时使AJAX内容平滑加载？

问题描述：

我无法让我的div在单击“查看活动”文本时顺利滑动。我希望实现的是：如何在滑动Div时使AJAX内容平滑加载？

当链接被点击了“查看活动”，我想在div滑开顺利
一旦全开，股利应显示“载入中...”直到内容满载
一旦内容被完全加载，就应更换“正在加载...”文字的DIV中

真的发生什么

当点击“查看活动”链接，在div突然打开，然后立即关闭
如果我点击链接，一旦越滑开正常，再次点击

时顺畅地滑动关闭怎样使第一次顺利地打开并在这种情况下顺利地加载内容？我怀疑这与滑动时div的内容有关，但我不知道如何解决它。

HTML

<div class="listing_activity_container"> 
    <span style="cursor: pointer;" class="listing_activity_link <?php echo $listing->listing_id ?>">View Activity</span> 
    <div class="activityContent_<?php echo $listing->listing_id ?>"></div> 
</div>

JQUERY

<script> 

    $(document).ready(function(){ 
     $(".listing_activity_link").click(function() { 
      var listing_id = $(this).attr('class').split(' ')[1] 
      var url = "<?php echo site_url('AJAX/ajax_default/listing_activity_seller'); ?>"; 

      $(".activityContent_"+listing_id).slideToggle(); 
      $(".activityContent_"+listing_id).html('Loading...'); 
      $.post(url, {listing_id: listing_id} ,function(data) { 
       $(".activityContent_"+listing_id).html(data); 
      }); 
     }); 
    }); 

</script>

答

使用animate阿贾克斯和注册complete callback：

$(".activityContent_"+listing_id).animate({"height":100}, { complete: function(){ 
    $(".activityContent_"+listing_id).html('Loading...'); 
    ... 
}});

该代码将在动画完成后执行。

谢谢。你知道如何使div滑出以容纳最终内容的真实高度吗？ – emkay

尝试将内容加载到不可见的div中。然后使用该高度滑动div（您可以缓慢滑动可见div并在内容加载时设置动画目标，因此用户没有等待时间）。当动画结束时，交换两个div。 –

好的，谢谢了很多 – emkay

答

我不认为是的slideToggle你找......

如果你想要的功能开放Ëdiv来设定高度，我会用

$(".activityContent_"+listing_id).animate({"height":100});

，并添加一些检测，因此不会尝试加载，当你关闭DIV

如何在滑动Div时使AJAX内容平滑加载？

相关推荐