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 pletely 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...

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 pletely 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...

• javascript
• jquery
• ajax
• effects

• I am having second thoughts about answering this question. please clarify. – Byron Whitlock Commented Aug 27, 2009 at 20:01
• Second thoughts as in? Basically, when I try using the callback of jquery's load function, the effects flicker in and out. It slides up, slides itself back down(meaning the new page hasn't loaded yet), then displays the new content. – Indranil Commented Aug 27, 2009 at 20:08
• Why would you not post any code?! Seriously. – Josh Stodola Commented Aug 27, 2009 at 20:13

2 Answers 2

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;
});

You can also try this:

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

It worked better for me, as you load the page once the slideUp effect is done.