javascript - 淡入具有相同类的元素只有当它们的中间到达使用 jQuery 路点的视口(viewport)时

Question

我有一个由许多部分组成的单页网站。我想使用 jQuery Waypoints 使其更具动态性。

应该是这样的:

每次具有类 fade-in-element 的元素进入视口(viewport)(有一些偏移)时，它会获得一个特殊类，该类将动画(淡化)元素 - 但仅一个具有当前在视口(viewport)中可见的类的元素。

我的成就:

当具有该类的第一个元素进入视口(viewport)时，具有该类的所有元素淡入。

HTML:

<section>Some content</section>
<section>
    <div class="container fade-in-element">
        <div class="row">
            <div class="col-sm-4"> SOME CONTENT </div>
            <div class="col-sm-4"> SOME CONTENT </div>
            <div class="col-sm-4"> SOME CONTENT </div>
        </div>
    </div>
</section>

<section>
    <div class="container fade-in-element">
        <h1 class="heading">HEADING</h1>

        <p>TEXT</p>
        <p>TEXT</p>
    </div>
</section>

CSS: .淡入元素{ 不透明度:0；

jQuery:

jQuery(document).ready(function ($) {
    $(function () {
        var inview = new Waypoint.Inview({
            element: $('.fade-in-wrap')[0],
            entered: function (direction) {
                $('.fade-in-element').addClass('animated2 fadeInLeft');
            },
            offset: '50%'
        });
    });
});

有人帮忙吗？谢谢!

Answer 1

这就是你需要的

$('.fade-in-element').each(function(){
        var _this = this;
        var inview = new Waypoint({
            element: _this,
            handler: function (direction) {
                $(this.element).animate({'opacity': 1})
            },
            offset: '50%'
        });

        });

这是一个 demo