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

gion_13 · Accepted Answer · 2012-01-10 21:16:17Z

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

answered Jan 10, 2012 at 21:16

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe Strommen · Accepted Answer · 2012-01-10 21:16:29Z

1

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

answered Jan 10, 2012 at 21:16

Joe Strommen

1,22410 silver badges18 bronze badges

Comments

Selvakumar Arumugam · Accepted Answer · 2012-01-10 21:26:02Z

0

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

edited Jan 10, 2012 at 21:26

answered Jan 10, 2012 at 21:16

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Comments

Maksim Vi. · Accepted Answer · 2012-01-10 21:18:10Z

-1

Have you tried the following construction?

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

answered Jan 10, 2012 at 21:18

Maksim Vi.

9,24512 gold badges62 silver badges85 bronze badges

Collectives™ on Stack Overflow

jQuery callback plus js function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related