Question

我有一个旋转器和一个桌子。

当表格加载时，我想隐藏表格并显示微调器。加载完成后，我想隐藏微调器，然后再次显示表格。

我有这个工作，但是当动画完成之前ajax调用完成时，我最终得到了微调器显示和表格。

这是我目前的代码

setLoading(true);// below is executed
$('#table').fadeOut(200, function(){$('#spinner').fadeIn()}
setLoading(false);/ below is executed
$('#spinner').fadeOut(200, function(){$('#table').fadeIn()}

但是当微调器仍然消失时，当ajax调用结束时，我最终得到了两个表，并且两个微调器都显示出来。

有没有办法对分组动画进行排队？

我希望如何：

Start Table fadeout
End Table fadeout
Start spinner fadein
End spinner fadein
Ajax call Finished
Start spinner fadeout
End spinner fadeout
Start Table fadein
end Table fadein

发生了什么：

Start Table fadeout
Ajax call finishes
Start spinner fadeout
End spinner fadeout
Start Table fadein
End Table fadeout
Start spinner fadein

由于

Answer 1

利用ajaxStart和ajaxStop个事件。

在ajaxStart事件中，您可以显示Spinner并隐藏表格，在ajaxStop中，您可以隐藏Spinner并显示表格。

$(document).ajaxStart(function() {
  $( ".spinner" ).hide();
});

$(document).ajaxStop(function() {
  $( ".spinner" ).show();
});

在队列中执行分组动画

1 个答案: