Попытка использовать JQuery .delay()

Question

Может кто-то пожалуйста, дайте мне знать, что я делаю неправильно здесь, как это выглядит, как мой .delay не работает:

$(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(); 
    }); 
}); 

Я в основном хотел бы показать мой form- загрузите div, подождите 5 секунд, затем скройте его, а затем отобразите мой другой add-node div.

Когда я нажимаю на свою кнопку, заметка, похоже, происходит, она просто показывает мою первоначальную кнопку div-add-node.

Любые идеи.

Спасибо.

Answer 1

Вместо

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

вы должны сделать

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

Взятыми из документации: метод

.delay() лучше всего подходит для затягивания между очередью JQuery эффектами.

В любом случае, если ничего не происходит, похоже, что ваше мероприятие не подключено правильно. Выкладываю разметку или скрипку, так что мы можем помочь

EDIT - я прочитал документацию немного лучше:

Добавлен JQuery в версии 1.4, метод .delay() позволяет задерживать Выполнение следующих функций в очереди. Он может использоваться с обычной стандартной версией или с пользовательской очередью . Только последующие события в очереди задерживаются; например это не задержит отсутствие аргументов форм .show() или .hide(), которые не используют очередь эффектов.

Таким образом, вы не можете использовать задержку с помощью show() и hide(); Вы должны использовать SetTimeout() я предполагаю:

$('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(); 
} 

скрипка: http://jsfiddle.net/qUD7U/1/