jQuery Waypoints 中的每个循环

Question

我无法让 $.each() 在 Waypoints 中工作。我看过其他一些使用相同方法的 Whosebug 帖子。所以我可能会遗漏一些东西。请帮忙！

我在 JSFiddle 上有它：https://jsfiddle.net/rs80dmn5/5/

这里是 html:

<ul class="col-sm-6">
                <li>
                    <h2>10<span>year</span></h2>
                    <h2>100,000<span>miles</span></h2>
                    <p>Powertrain<br/>Warranty</p>
                </li>
                <li>
                    <h2>5<span>year</span></h2>
                    <h2>60,000<span>miles</span></h2>
                    <p>Limited Warranty</p>
                </li>
                <li>
                    <h2>5<span>year/unlimited miles</span></h2>
                    <h2>24<span>hour</span></h2>
                    <p>Roadside Assistance</p>
                </li>
                <li>
                    <p>You have certain expectations when looking for a new car and one of the most important is that it will last, which is why we back every Hyundai with “America’s Best Warranty.” It’s our way of showing how much confidence we have in the quality of the vehicles we make so you’ll have the confidence of knowing that the joy of ownership is one that will last for today, tomorrow and years down the road.</p>
                    <a href="#">Learn more about our Warranty</a>
                    <p><small>*America’s Best Warranty claim based on total package of warranty programs. See dealer for LIMITED WARRANTY details.</small></p>
                </li>
            </ul>

这是我的 CSS:

    ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  height: 500px;
  width: 100%;
  display: block;
}

li h2 {
  font-size: 110px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        margin-top: 20px;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}

h2.fadeup {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
li h2 span {
  font-size: 20px;
}

这是我的 JS：

$(document).ready(function(){

    $('h2').each( function(){

        $(this).waypoint({

            handler: function(){

                $(this).addClass('fadeup');

            }

        });

    });

});

我没有收到任何错误。然而什么也没有发生。

Answer 1

您遗漏了 $.each 函数的两个重要参数。对于 jQuery 选项，使用 element 而不是 this。

$(document).ready(function(){
    $('h2').each( function(index, element){
        $(element).waypoint({
            handler: function(){
                $(element).addClass('fadeup');
            }
        });
    });
});

Answer 2

$(this) inside $(this).waypoints ({..指的是航点对象而不是元素h2

试试这个：

$('h2').each(function(){

    var self = $(this);

    $(this).waypoint({
         handler: function(){
             self.addClass('fadeup');
         }
    });
})

jQuery Waypoints 中的每个循环

jQuery each loop in Waypoints

html

javascript

css

jquery

jquery-waypoints