Question

The delay function isn’t working as I expect it should. I’m sure I’m doing something wrong. I have an overlay that I want to use. When a user clicks a link, I’d like this function to delay for 1 second and then “release”, allowing the user to go to the link they clicked on. How can I do this?

     $("body").append("<div id='overlay'></div>");
     $("#overlay").height(docHeight).css({
...
      }).delay(1000);  <-- This is where I think it should go...
    });

EDIT:

I’ve tried both solutions offered but I can’t get the overlay to hold. The screen just refreshes in about half a second. It’s ignoring the setTimeout function. What I did to test the setTimeout function was the following but I don’t even get the alert. I’m assuming that I would put my overlay code in place of where I have the alert(), right?

Just for clarity, what I expect to see is a 1 second delay when the .load selector is clicked then the user forwarded to the link they clicked.

  $('.load').click(function() {
    setTimeout(function(){
      alert();
    }, 1000);
  });

Answer 1

How .delay() works

From the documentation:

.delay() – Set a timer to delay execution of subsequent items in the queue.

And example usage:

$("div.first").slideUp(300).delay(800).fadeIn(400);

Solution

If you want however to delay execution of some command and it is not in the queue like the above, then just use simple JavaScript’s setTimeout():

setTimeout(function(){
    $("#overlay").height(docHeight).css({
        ...
    });
}, 1000);

In your case this is the preferred solution, as delay() works only on queued items (as mentioned above). As a proof see that this is not working: http://jsfiddle.net/xaC3m/