如果视口中有更多具有相同 class 的元素，则函数

Question

我只想在元素在视口中可见时淡入。为此，我使用了 isOnScreen() 函数。它工作正常，但只适用于一个元素，如果页面上有更多具有相同 class 的元素，它只适用于第一个。

如何对页面上的所有元素使用函数 isOnScreen()？

例如，我在页面的开头有一个元素.quote，在页面的末尾有一个元素。第一个元素工作正常，底部的元素不行。

我试过使用 $('.quote').each(function() { 和内部 isOnScreen()' 但它不起作用。

编辑

我找到了解决方案，请参阅下面我自己的答案。

$.fn.isOnScreen = function(){

        var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();

        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

    };

    $(window).scroll(function() {

        if ($('.quote-container').isOnScreen()) {
            $('.quote').addClass('fade-in');
        } else {
            $('.quote').removeClass('fade-in');
        }
    });

.main-container {
  height: 2000px;
}
.quote-container {
    width: 100%;
    background-color: yellow;
    margin: 0;
}
.quote {
    font-size: 175%;
    font-style: italic;
    text-align: right;
    margin: 0;
    padding: 35px 215px;
}
.page-content {
    width: 100%;
    background-color: lightblue;
    margin: 0;
}
.page-content p {
    position: relative;
    top: 50%;
    margin-left: 230px;
    font-size: 220%;
    margin-top: 0;
    margin-bottom: 0;
}
.big {
  height: 1000px;
}
.little {
  height: 700px;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-out 1;
    -moz-animation:fadeIn ease-out 1;
    animation:fadeIn ease-out 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1.6s;
    -moz-animation-duration:1.6s;
    animation-duration:1.6s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
  <div class="page-content little">
    <p>Page Content</p>
  </div>
  <div class="quote-container">
    <p class="quote">Lorem Ipsum.</p>
  </div>
  <div class="page-content big">
    <p>Page Content</p>
  </div>
  <div class="quote-container">
    <p class="quote">Dolor sit amet.</p>
  </div>
  <div class="page-content little">
    <p>Page Content</p>
  </div>
</div>

Answer 1

你可以这样做：

$('.quote-container').each(function() {
  $('.quote').toggleClass('fade-in', $(this).isOnScreen());
});

这将在每个 .quote-container 元素上调用您的 isOnScreen 方法，并根据返回值将 .quote 上的 class 切换为 true/false .

假设您想要在视口中的项目是 .quote-container 并且您想要 add/remove 的多个节点 fade-in class 有一个 .quote class。通过阅读您的 if 块，我了解到情况就是如此，尽管 classes 的名称有点令人困惑，所以我可能误解了。如果是这样，请告诉我，我会调整答案。

Answer 2

我刚刚使用 Luis Serrano 的回答解决了一些小改动。

  $('.quote-container').each(function() {
    if ($(this).isOnScreen()) {
        if ($(this).children('.fade-in').length < 1) {
        $(this).children().toggleClass('fade-in');
      }
    }
  });

这样 .quote 只会淡入一次，并且只会在视口中淡入。

如果视口中有更多具有相同 class 的元素，则函数

function if more elements with same class in viewport

html

javascript

jquery

viewport

fadein