jQuery callback plus js function

Question

Hi I am having some trouble combining a js function with a jQuery function. The code below works, but as you might have guessed, I am hoping to fade first, then change the HTML, then fade back in.

function updateit(a) {
 $("#monthlyHead").fadeOut(100);
 $("#monthlyText").fadeOut(100);
 if (a == 1) {
 $("#monthlyHead").html(headone);
 $("#monthlyText").html(textone);
 }
 else if (a == 2) {
 $("#monthlyHead").html(headtwo);
 $("#monthlyText").html(texttwo);
 }
 $("#monthlyHead").fadeIn(900);
 $("#monthlyText").fadeIn(900);
}

Answer 1

function updateIt(a){
 $("#monthlyHead,#monthlyText").fadeOut(100,function(){
 if (a == 1) {
 $("#monthlyHead").html(headone);
 $("#monthlyText").html(textone);
 } else if (a == 2) {
 $("#monthlyHead").html(headtwo);
 $("#monthlyText").html(texttwo);
 }
 $(this).fadeIn(900);
 });
}

Answer 2

fadeOut, fadeIn, and all the jQuery animation methods take an optional 'callback' argument that gets run when the animation completes. That's what you should use here. So:

$("#monthlyHead").fadeOut(100, function() {
 if (a == 1) {
 $("#monthlyHead").html(headone);
 }
 else {
 $("#monthlyHead").html(headtwo);
 }
 $("#monthlyHead").fadeIn(900);
});

Answer 3

Simplified DEMO here

Try this

function updateit(a) {
 $("#monthlyHead").fadeOut(100, function () {
 if (a == 1) {
 $("#monthlyHead").html(headone);
 } else if (a == 2) {
 $("#monthlyHead").html(headtwo);
 }
 }).fadeOut(900);
 $("#monthlyText").fadeOut(100, function () {
 if (a == 1) {
 $("#monthlyText").html(textone);
 } else if (a == 2) {
 $("#monthlyText").html(texttwo);
 }
 }).fadeOut(900);
}

Answer 4

Have you tried the following construction?

$(selector).fadeOut(100, function(){
 $(selector2).html(text);
 $(selector).fadeIn(900);
});