淡入延迟加载

Question

我已经弄好了一些相当不错的东西，我想在即将到来的项目中使用。

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

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

或者您应该在element2上定义延迟并将延迟乘以element3？

Answer 1

如果您有div，比如说class="faded"，那么您可以在加载时淡入每个div，每个都是这样的：

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

You can view a demo of this effect here或a slower version here。 400为400毫秒，正常.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（）的东西来触发下一个适当的时间已经过去了。

编辑：我有所纠正。