jQuery each loop in Waypoints

Question

I am having trouble getting a $.each() working in Waypoints. I've seen some other stackoverflow posts that is using the same method. So i may be missing something. Please help!

I have it on JSFiddle: https://jsfiddle.net/rs80dmn5/5/

Here is the 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>

Here is my 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;
}

Here is my JS:

$(document).ready(function(){

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

        $(this).waypoint({

            handler: function(){

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

            }

        });

    });

});

I am not getting any errors. However nothing is happening.

Answer 1

$(this) inside $(this).waypoints ({.. refers to the waypoint object instead of the element h2

Try this:

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

    var self = $(this);

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