Question

我有一个弹出框，显示用户配置文件的大量信息，与此无关，如何使用此脚本通过jQuery调用该框：

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

一旦出现方框，一切都很好。（注意，＃Widget_ep的初始显示是＆＃34;显示：无;＆＃34;。）但是，当我点击叠加层关闭框时，当我遇到问题时，现在叠加层和窗口小部件会相应地使用以下脚本淡出：

$("#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，

请注意，在使用.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()的调用时，动画将停止工作。

jQuery fadeIn在.delay之后中断

1 个答案: