淡入延迟加载答案

【问题标题】：Fade in delay on Load淡入延迟加载
【发布时间】：2010-06-28 14:40:00
【问题描述】：

我偶然发现了一些非常好的东西，我想在一些即将到来的项目中使用。

这是加载时的动画不透明度，或者你可以称之为淡入。

我想知道您是否可以将一些元素链接在一起（例如 3），所以 element2 仅在 element1 完成时开始，element3 在没有完成时开始。 2是？

或者您是否应该在element2 上定义一个延迟并乘以element3 上的延迟？

【问题讨论】：

一般使用queueing完成。
@zzzzBov 我很想知道如何使用排队来完成，如果它有任何优势，也许你可以将它作为新答案发布。
@PhilippM，不做太多细节，你可以在一个元素上设置一个队列（我通常在排队多个元素时选择一个共同的父级）和it will correctly chain out the order of interactions without needing any sort of fancy looping or calculating timings。

【解决方案1】：

如果你有 div，比如class="faded"，你可以在加载时淡入淡出，每个都像这样连续：

$(".faded").each(function(i) {
  $(this).delay(i * 400).fadeIn();
});

您可以使用.hide() 在页面加载时隐藏它们，如下所示：

$(".faded").hide()

或者在 CSS 中做：

.faded { display: none; }

【讨论】：

【解决方案2】：

您可以让 element2 上的淡入在 element1 的完成回调时间开始：

 element1.fadeIn(500, function() {  
       element2.fadeIn(500, function() { 
            etc...

【讨论】：

【解决方案3】：

由于我不相信这些类型的动画有任何成功回调的方式，如果你知道一个元素需要多长时间才能淡出，你可以使用 setTimeout() 之类的东西来触发下一个适当的时间过去了。

编辑：我的立场是正确的。

【讨论】：