淡入延迟加载

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

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

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

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

Answer 1

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

 $(".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（）的东西在适当的数量后触发下一个时间过去了。

编辑：我纠正了。