javascript - 视口(viewport)检查器中的 jquery 一次用于多个元素

Question

我有一个 jQuery 函数来检查元素是否在视口(viewport)中。如果是，它会添加“animate”类以启动动画并使元素可见。

上面的方法有效，但是现在(有多个元素)jQuery 只针对类为 blogcard 的第一个元素。然后对所有元素执行 addClass("animate")。如果它在视口(viewport)中，我希望它查找每个元素。也许使用 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');
        }
    });
});