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.

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.

• javascript
• jquery
• html

4 Answers 4

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 pletes then you should put it in the plete 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/BnFyb/

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

Delay is for action queue (animate(),slideUp(), etc...) and does not effect the daisy chain sequencing for non effects. You can use callbacks to achieve true delay for $.html();

$(selector).animate({marginTop:0},500,function() {
    $(this).html("CHANGE ME");
});

effects like hiding and showing elements get added to an effects queue. Adding to the queue does happen instantly, as does setting a delay on a queue. Html function happens instantly too.

the delay function doesnt actually delay the calling of the next function in the chain. by default, without a 2nd parameter it delays the FX queue.

If you want to get around this you can either create your own queue using the jQuery.queue functions ( http://api.jquery./jQuery.queue/ ) or more simply use the standard setTimeout functions ( https://developer.mozilla/en/DOM/window.setTimeout )

Alternatively you could also use the plete callbacks of the hide function to continue your chain