jQuery “slideDown” animation not working

Question

I have this little script which is supposed to:

1) slideUp the element with class="text"

2) Change the inner content with "This is the new text"

3) slideDown the hidden text.

var newText = "This is the new text";
$(".text").slideUp("400").queue(function(){
    $(this).html(newText);
}).queue(function(){
    $(this).slideDown("400");
});

But the third step is misteriously not working. I can see through DOM inspector the 2 step worked and the content actually changed. But the ".text" element remains with style="display:none;".

I don't know what is wrong, there are no errors. Why is this (not) happening?

Answer 1

See http://jsfiddle.net/rhg94f5b/

You don't need to queue animations, just call one after the other. You can change the text on the complete callback of the first slide and then slide down:

$(".text").slideUp("400", function() {
    $(this).html(newText);
}).slideDown("400");

Answer 2

There is no need for you to use .queue() here.

Use the callback functions provided by jQuery's animation methods like .slideUp() :

var newText = "This is the new text";
$(".text").slideUp(400, function(){
    $(this).html(newText).slideDown(400);
});

If you really must use .queue() you can do. But you don't queue after changing the .html() as it isn't a queued method. You just need to .dequeue() and then call .slideDown() :

var newText = "This is the new text";
$(".text").slideUp("400").queue(function(){
    $(this).html(newText).dequeue().slideDown(400);
});

JSFiddle