Question

在点击“查看活动”文本时，我无法顺利滑动div。我希望实现的目标是：

点击“查看活动”链接后，我希望div能够顺畅地滑开
完全打开后，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>

Answer 1

使用animate并注册complete callback：

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

此代码将在动画结束后执行。

Answer 2

我认为slideToggle不是您要寻找的功能......

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

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

并添加一些检测，以便在关闭div时不会尝试加载ajax

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

2 个答案: