Question

What am I doing wrong here? It looks like my .delay is not working:

$(document).ready(function() {

    var imgsrc = "#WORKSPACE_IMAGES#spinner_big.gif";

    $('a#add-node').click(function() {
        $('a#add-node').hide();
        $('#form-loading').show().delay(5000);
        $('#form-loading').hide()
        $('a#add-node').show();
    });
});

I basically would like to display my form-loading div, wait 5 seconds, then hide it and then display my other add-node div.

When I press on my button, noting seems to happen, it just shows my original add-node div button.

Answer 1

Instead of

   $('#form-loading').show().delay(5000);
   $('#form-loading').hide();

you should do

   $('#form-loading').show().delay(5000).hide();

Taken from documentation:

The .delay() method is best for
delaying between queued jQuery
effects.

Anyway if nothing happens, it seems like your event is not attached correctly. Post the markup to or a fiddle so that we can help

EDIT – i read the documentation a little better:

Added to jQuery in version 1.4, the
.delay() method allows us to delay the
execution of functions that follow it
in the queue. It can be used with the
standard effects queue or with a
custom queue. Only subsequent events
in a queue are delayed; for example
this will not delay the no-arguments
forms of .show() or .hide() which do
not use the effects queue.

So you cant use delay with show() and hide(); The you have to use setTimeout() i guess:

$('a#add-node').click(function() {
    $('a#add-node').hide();
    $('#form-loading').show();
    setTimeout(restoreVisibility, 5000);
});

var restoreVisibility = function(){
    $('#form-loading').hide();
    $('a#add-node').show();
}

fiddle: http://jsfiddle.net/qUD7U/1/