javascript - Waypoints 中的 jQuery 每个循环

Question

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

我在 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

$(this)里面的$(this).waypoints({..指的是waypoint对象而不是元素h2

试试这个:

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

    var self = $(this);

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