CODEWITHSUNDEEP
javascriptjqueryajax
pHbits
pHbits

Reputation: 386

Content load only after fadeOut

I am trying to load content in between fadeOut and fadeIn.

If I try to run the following code the content loads before the fadeOut finishes:

$("#contentArea").fadeOut(1000);
$("#contentArea").promise().done();
$("#contentArea").load(content_map[$(this).attr('id')]);
$("#contentArea").fadeIn(1000);

I have tried to put a callback function in the fadeOut but still, the load inside that callback was called early. I tried to add a setTimeout after the fadeOut and it still didn't work.

I added the promise function (which is critical apparently), with or without a callback function holding the follow-up actions, but it did not work.

I will be happy to know how best to achieve this effect and if someone can also give me a tip as to why my other attempts failed it will be a wonderful bonus :)

Upvotes: 0

Views: 68

Answers (1)

Barmar
Barmar

Reputation: 780724

The callback function should work, so I suspect you did it wrong. It should be:

$("#contentArea").fadeOut(1000, function() {
    $(this).load(content_map[this.id], function() {
        $(this).fadeIn(1000);
    });
});

Upvotes: 3

Related Questions