jquery在视口检查器中一次检查多个元素答案

【问题标题】：jquery in viewport checker for multiple elements at oncejquery在视口检查器中一次检查多个元素
【发布时间】：2018-09-07 11:54:58
【问题描述】：

我有一个 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：