视口检查器中的 jQuery 一次用于多个元素

Question

我有一个jQuery函数，可以检查元素是否在视口中。如果是，则添加类"animate"以启动动画并使元素可见。

以上有效，但是现在(具有多个元素(jQuery仅针对具有类blogcard的第一个元素。然后对所有元素执行addClass("animate")。我希望它查找每个元素，如果它在视口中。也许带有jQuery.each()功能。但我还没有设法让它工作。

这是我的代码：

.JS：

$.fn.isInViewport = function () {
let elementTop = $(this).offset().top;
let elementBottom = elementTop + $(this).outerHeight();
let viewportTop = $(window).scrollTop();
let viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on("load resize scroll", function () {
if ($('.blogcard ').isInViewport()) {
$('.blogcard').addClass("animate");
console.log('success.')
}
});

.CSS：

.fade-in {
opacity            : 0;
-webkit-transition : opacity 2s ease-in;
-moz-transition    : opacity 2s ease-in;
-ms-transition     : opacity 2s ease-in;
-o-transition      : opacity 2s ease-in;
transition         : opacity 2s ease-in;
}
.fade-in.animate {
opacity : 1;
}

.HTML：

{#Item 1#}
<div class="blogcard fade-in">
{#Blog content#}
</div>
{#Item 2#}
<div class="blogcard fade-in">
{#Blog content#}
</div>
{#Item 3#}
<div class="blogcard fade-in">
{#Blog content#}
</div>

Answer 1

是的。你可以用 $.each(( 来做到这一点：

$(window).on("load resize scroll", function () {
$('.blogcard').each(function() {
if( $(this).isInViewport() ) {
$(this).addClass('animate');
}
});
});