javascript - 从上到下淡入页面元素

Question

从上到下淡入页面元素有哪些好的资源？

我有一个 Magento 项目，其中有几个 flexslider 和一些其他静态元素，我有兴趣在加载时从上到下淡入不同的元素行。目前静态元素加载，然后 flexslider 加载最后，使页面加载不优雅。

有没有人有一些我可以调查的建议插件或类似资源？我将对一些静态图像使用延迟加载，但这并不能解决垂直加载问题。如果不是直接的 javascript，最好基于 jquery。

Answer 1

如果您尝试在第一行进行淡入淡出，然后是下一行，然后是下一行，依此类推，您可以使用自定义队列：

// Set up your queue of fadeIns:
$(row_selectors).each(function() {
    $(this).queue(
        'fade_in_tans',
        function() {
            $(this).fadeIn().delay(delay_in_ms_if_desired).dequeue('fade_in_trans');
        }
    );
});
// now initiate the first fadeIn:
$(first_row_selector).dequeue('fade_in_tans');