javascript - 淡入延迟加载

Question

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

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

我想知道你是否可以将一些元素链接在一起（例如 3），所以只有在完成element2时才开始，而在没有时才开始。2是？element1element3

或者你应该定义一个延迟element2并乘以延迟element3？

Answer 1

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

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

您可以在此处查看此效果的演示，或在此处查看较慢的版本。这400是400ms，正常.fadeIn()速度的持续时间:)

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

$(".faded").hide()

或者在 CSS 中执行：

.faded { display: none; }

Answer 2

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

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

Answer 3

因为我不相信这些类型的动画有任何成功回调的方式，如果你知道一个元素需要多长时间才能褪色，你可以使用 setTimeout() 之类的东西在适当的数量后触发下一个时间已经过去了。

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