从上到下淡入页面元素

Question

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

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

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

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');