如何添加簡單的淡入淡出對延遲加載js的元素

Question

我有這個懶加載腳本加載更多的職位與.load。當js加載到每個帖子中時，如何添加動畫效果（例如show（'slow'）），以便每個帖子在加載時都會淡入？

我的JS：

jQuery(function(){ 
    var page = 2; 
    var myurl = blogUrll 
    var loadmore = 'on'; 
    jQuery(document).on('scroll resize', function() { 
     if (jQuery(window).scrollTop() + jQuery(window).height() + 200 > jQuery(document).height()) { 
     if (loadmore == 'on') { 
      loadmore = 'off'; 
      jQuery('#spinner').css('visibility', 'visible'); 
      jQuery('#lazyload').append(jQuery('<div class="blog-grid" id="p' + page + '">').load(myurl + '/blog/page/' + page + ' article', function() { 
      page++; 
      loadmore = 'on'; 
      jQuery('#spinner').css('visibility', 'hidden'); 
      })); 
     } 
     } 
    }); 
    jQuery(document).ajaxComplete(function(event, xhr, options) { 
     if ($(".blog-grid").is(':empty')) 
     { 
      loadmore = 'off'; 
     } 
     if (xhr.responseText.indexOf('class="blog-grid"') == -1) { 
     } 
    }); 
    }); 

Answer 1

對於每一個博客帖子：

<div class="blogPost"> ... </div> 

將其設置爲初始非不透明：

.blogPost { 
    opacity: 0; 
} 

，並使用jQuery的animate()上在您加載博客文章以使其不透明後，回調（在您的ajaxComplete()中）。

$(".blogPost").animate({opacity: 1}, 1000); 

Answer 2

嘗試增加style屬性在所附.blog-grid元件opacity到0，在​​complete函數調用$(this).fadeTo("slow", 1)

jQuery('#lazyload') 
.append(
    jQuery('<div style="opacity:0" class="blog-grid" id="p' + page + '">') 
    .load(myurl + '/blog/page/' + page + ' article', function() { 
    $(this).fadeTo("slow", 1); 
    page++; 
    loadmore = 'on'; 
    jQuery('#spinner').css('visibility', 'hidden'); 
    }) 
);