jQuery html() Chained with Other Functions Timing Issue

Question

I've noticed this a lot but it's finally starting to bug me (pardon the pun). When I chain html() with other functions, it seems like html() runs first regardless. For example:

$("#news .inner").hide("slide", { direction: strOpposite }, 500).delay(1000).html(strData).show("slide", { direction: strDirection }, 500);

Even adding a delay() to it as shown doesn't seem to solve the problem. This line is part of a page flipping effect I implemented for the news archive section of a website. Any ideas? Thanks.

Answer 1

When you chain a lot of methods together they will be executed in the order they are chained, but animation methods add to the animation queue and the actual animation happens later (in order).

As I understand it, the .delay() method only delays things in the animation queue. The .html() method is not an animation thing.

If it is your intention for the .html() call to occur after the .hide() method completes then you should put it in the complete callback provided by the .hide() method.

So, assuming you want to hide, then change the html, then show, you can do this:

$("#news .inner").hide("slide", { direction: strOpposite }, 500,
                       function() { $(this).html(strData); })
                 .show("slide", { direction: strDirection }, 500);

Demo: http://jsfiddle.net/BnFyb/

Answer 2

The "effects" that jQuery does gets added to an effect queue as opposed to non-effect-like calls (.html()) which don't and are therefore done immediately.

You can try adding it to a callback function though like so:

$("#news .inner").hide("slide", { direction: strOpposite }, 500).delay(1000, function() {
    $(this).html(strData)
}).show("slide", { direction: strDirection }, 500);

Or you may be trying to do this:

$("#news .inner").hide(500, function() {
    $(this).html(strData); 
}).delay(1000).show("slide", { direction: strDirection }, 500);

BTW I think your hide() and show() calls aren't syntactically correct. You should check out .hide() and .show() on the jQuery API