簡體   English   中英

滑動Div時如何使AJAX內容平滑加載?

[英]How to make AJAX content load smoothly while sliding Div?

在點擊“查看活動”文本時,我無法順利地滑動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>

使用animate並注冊完整的回調

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

動畫結束后將執行此代碼。

我認為slideToggle不是你想要的功能......

如果你想將div打開到我想使用的設定高度

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

並添加一些檢測,以便在關閉div時不會嘗試加載ajax

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM