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.