CODEWITHSUNDEEP
jquery
tonyf
tonyf

Reputation: 35567

Trying to use jQuery .delay()

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.

Upvotes: 1

Views: 609

Answers (1)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76890

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/

Upvotes: 3

Related Questions