How to make AJAX content load smoothly while sliding Div?

Question

I am having trouble getting my div to slide smoothly upon the "View Activity" text being clicked. What I wish to achieve is this:

• When the "View Activity" link is clicked, I want the div to slide open smoothly
• Once full open, the div should display "Loading..." until the content is fully loaded
• Once the content is fully loaded, it should replace the "Loading..." text inside the div

What really happens

• When the "View Activity" link is clicked, the div suddenly opens and then instantly closes
• If I click the link once more it slides open normally and slides closed smoothly when clicked again

How do I make it slide open smoothly the first time and load the content smoothly while this happens? I suspect this has something to do with the content of div being changed while sliding, but I have no idea how to fix it.

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

Use animate and register a complete callback :

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

This code will be executed after the animation has finished.

Answer 2

I don't think slideToggle is the function your looking for...

If you want to open the div to a set height I would use

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

And add some detection so it doesn't try to load the ajax when you're closing the div