從上到下淡入頁面元素

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