How can I get jQuery load() to complete before fadeOut/fadeIn?

Question

I want to do an AJAX call via jQuery load() and only once it returns, then fadeOut the old content and fadeIn the new content. I want to old content to remain showing until the

Answer 1

The problem is related to the fact that all three functions, fadeOut, load and fadeIn are asynchronous. Each of the above functions accept a callback argument (a function) which will run when the function has finished execution. E.g.

$('#data').fadeOut(functionToRunWhenFadeOutIsComplete);

//If you have defined 'functionToRunWhenFadeOutIsComplete' it will run after fadeOut is over.

Armed with this knowledge, you can now solve your problem.

var fadeInData = function fadeInData() { $('#data').fadeIn(); }
var loadData = function loadData() { $('#data').load('url', fadeInData); }
$('#data').fadeOut(loadData);

Alternatively, you can define loadData, fadeInData as an inline anonymous functions.