JQuery FadeIn ломает после .delay

Question

У меня есть всплывающее окно, которое показывает кучу информации для профиля пользователя, отношения к этому вопросу, как окно появляется называется через JQuery, используя этот скрипт:

$('#overlay').fadeIn(); 
$('#widget_ep').fadeIn().delay(1000).queue(function(){ 
      $('#widget_ep').css({'top' : '20px'}); 
     }); 

После в окне появляется все нормально. (Обратите внимание, что начальный экран для #Widget_ep - «Display: None;».) Однако, когда я нажимаю наложение, чтобы закрыть окно, вот когда у меня возникают проблемы, теперь наложение, а также виджет исчезают соответственно, используя сценарий ниже:

$("#overlay").click(function(){ 
    $('#overlay').fadeOut().html(""); 
    $('#widget_ep').slideUp().delay(1000).queue(function(){$(this).html("")}); 
}); 

Но мой вопрос, даже если виджет исчезает, после повторного вызова сценария, виджет не появляется, только наложение делает. Что это за проблема, когда я удаляю функцию «delay», открытие и закрытие виджета работает без ошибок. Это приведет к тому, что я буду использовать только этот код $('#widget_ep').slideUp().html("");

Итак, мой вопрос к вам: что-то не так с моим кодом? Почему функция задержки препятствует мне снова затухать виджет, он просто сохраняет свой css как display:none;

Answer 1

Не думаю, что проблема delay является проблемой здесь. Вещь, которая отсутствует в вашем обратном вызове очереди, - это вызов функции .dequeue() для выполнения следующей функции в строке.

Цитируя .queue() documentation,

Обратите внимание, что при добавлении функции с .queue(), мы должны убедиться, что .dequeue(), в конце концов называется так, что следующая функция в строке выполняется.

Для JQuery 1.4+, вы можете передать аргумент в свою очередь обратного вызова, чтобы из очереди следующий пункт так:

$('#widget_ep').fadeIn().delay(1000).queue(function (next){ 
    $('#widget_ep').css({'top' : '20px'}); 
    next(); 
}); 

Использование .dequeue() эквивалент будет выглядеть примерно так:

$('#widget_ep').slideUp().delay(1000).queue(function(){ 
    $(this).html("").dequeue(); 
}); 

Я экспериментировал с образцом скрипки here. В тот момент, когда я удаляю вызовы на .dequeue() или next(), анимация перестанет работать.