Как сделать так, чтобы содержимое AJAX плавно загружалось при скольжении Div?

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 и зарегистрируйте полный обратный вызов :

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

Этот код будет выполнен после завершения анимации.

Answer 2

Я не думаю, что slideToggle - это та функция, которую вы ищете ...

Если вы хотите открыть div на заданную высоту, я бы использовал

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

и добавил бы немногообнаружение, поэтому он не пытается загрузить AJAX, когда вы закрываете div