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');
        }
    });
});

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

1 个答案: