javascript - 如何在使用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;
}

加载博客文章后，在回调(在 ajaxComplete() 中)上使用 jQuery animate() 使其不透明。

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