.delay 后 jQuery fadeIn 中断

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

但我的问题是，即使小部件淡出，再次调用脚本后，小部件也没有出现，只有覆盖层出现。解决此问题的方法是当我删除“延迟”功能时，打开和关闭小部件可以正常工作。这将导致我只使用这段代码 $('#widget_ep').slideUp().html("");

所以我想问你，我的代码有问题吗？为什么延迟功能阻止我让小部件再次淡入淡出，它只是将其 css 保持为 display:none;

Answer 1

我不认为 delay 函数是这里的问题。您的两个队列回调中都缺少对 .dequeue() 的调用。函数以内联执行下一个函数。

引用.queue() documentation ,

Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes.

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

我试验了一个样本 fiddle here .当我删除对 .dequeue() 或 next() 的调用时，动画将停止工作。