How to change <title> with delay?

Question

I know in jQuery 1.4.x there is a method delay(). We can use it like this:

$('#block').slideUp().delay(2000).slideDown();

and it works great. But i want to modify document.title, but this construction doesnt work:

$('title').html('New title 1').delay(2000).html('New title 2');

when you run this code title will be New title 2 avoid any delay. How to fix it?

Answer 1

Use a callback with setTimeout:

$('title').html('New title 1');

window.setTimeout(function() {
    $('title').html('New title 2');
}, 2000);

$.fn.delay puts a delay in the animation queue. It does not delay the running script.

Answer 2

If you want to use .delay() and .queue(), you can do this:

$('title').html('New title 1').delay(2000)
          .queue(function() { $(this).html('New title 2'); });

Though setTimeout like stranger has seems simpler in this case.

Answer 3

Do not forget to call $(this).dequeue() if you are going with the Nick Cravers approach, otherwise your queue will stall all others.

$(this).val("newTitle1")
        .effect("pulsate", { times: 3 }, "slow")
    .delay(1000)
    .queue(function() {
        $(this).val("newtitle 2")
            .effect("pulsate", {times: 1}, "slow");
        $(this).dequeue(); //dont forget to do this
                });