仅当具有相同类的元素的中间使用 jQuery 航点到达视口时，才淡入具有相同类的元素

Fade in elements with the same class only when their middle reach the viewport using jQuery waypoints

本文关键字：元素 同类 视口 淡入 中间 jQuery      更新时间：2023-09-26

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

是什么应该看起来像：

每次具有类淡入元素

的元素进入视口（有一些偏移量）时，它都会得到一个特殊的类，该类将对元素进行动画处理（淡入淡出） - 但只有具有类且当前在视口中可见的一个元素。

我所取得的成就：

当具有类的第一个元素进入视口时，具有类的所有元素都会淡入。

.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： .fade-in-element { 不透明度：0; }

j查询：

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

有人帮忙吗？谢谢！

这就是你所需要的

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

这是一个演示

你应该把它包装在一个if中。您可以使用 $（window）.width 和 .height. 检查窗口大小，并使用 $（document）.scrollTop 检查当前位置。您可以使用这些值设置边界框，并检查div 是否在里面。

var top = $(document).scrollTop();
var height = $(window).height();
$('.fade-in-wrap').each(function(){
    var off = $(this).offset();
    if(off.top > top && off.top < top+height) {
        // Add the waypoint here. The element must be $(this)!
    }
});
相关文章：