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

在单击“查看活动”文本时，我无法使我的div平滑滑动。我希望做到的是：

• 单击“查看活动”链接时，我希望div能够顺利打开
• 完全打开后，div应显示“正在加载…”，直到内容完全加载
• 内容完全加载后，应替换div中的“加载…”文本

到底发生了什么

• 单击“查看活动”链接时，div突然打开，然后立即关闭
• 如果我再次单击链接，它会正常滑动打开，再次单击时会平滑滑动关闭

我如何使它在第一次滑动时平滑打开，并在这种情况下平滑加载内容？我怀疑这与滑动时div的内容被更改有关，但我不知道如何修复它

HTML

我不认为滑动切换是你想要的功能

如果你想将div打开到设定的高度，我会使用

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

并添加一些检测，这样当您关闭div时，它就不会尝试加载ajax了
使用
动画
并注册：

此代码将在动画完成后执行。
谢谢。您知道如何使div滑出以适应生成内容的真实高度吗？尝试将内容加载到一个不可见的div中。然后使用该高度滑动div（您可以缓慢滑动可见div，并在加载内容时设置动画目标，因此用户无需等待时间）。动画结束后，交换两个div。
<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>

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

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