如何在滑動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>

來源

2011-08-22 emkay

使用animate阿賈克斯和註冊complete callback：

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

該代碼將在動畫完成後執行。

來源

2011-08-22 07:42:21

謝謝。你知道如何使div滑出以容納最終內容的真實高度嗎？ – emkay

嘗試將內容加載到不可見的div中。然後使用該高度滑動div（您可以緩慢滑動可見div並在內容加載時設置動畫目標，因此用戶沒有等待時間）。當動畫結束時，交換兩個div。 –

好的，謝謝了很多 – emkay

我不認爲是的slideToggle你找......

如果你想要的功能開放Ëdiv來設定高度，我會用

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

，並添加一些檢測，因此不會嘗試加載，當你關閉DIV

來源

2011-08-22 06:57:03 Coomie

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

回答

相關問題