javascript and ajax load, then effects

Question

Hi, I have a javascript code, whereby I'm trying to load a list from a separate page (using jQuery's load() function), slide the current list out and slide the new list in.

Now, I don't want the old list to slide until after the new list has been completely loaded. Can anyone tell me how to achieve this without looking like the script is having second thoughts while execution..

Thank you.

Edit

$('.cont a').click(function() {
 var page = $(this).attr('href');
 $('.p-list').prepend('<div class="loader">&nbsp;</div>');
 $('.p-list').load(page +" .proj").hide().fadeIn();
 return false;
});

Sorry for not putting the code in. However, I don't really know how much help this is...

Answer 1

This should do it:

$("#someDiv").slideUp("slow").load('blah.html', function() {
    $(this).slideDown("slow");
});

If you call the slideDown method in load's callback (or any of the other ajax methods), that will ensure the animation happens after the element has been filled with the response.

EDIT: To apply that to your code:

$('.cont a').click(function() {
        var page = $(this).attr('href');
        $('.p-list').prepend('<div class="loader"> </div>');
        $('.p-list').slideUp("slow").load(page +" .proj", function() {
             $(this).fadeIn("slow"); //or show or slideDown
        });
        return false;
});