Having trouble with the $.each() function in Waypoints and could use some assistance. I've checked other Stack Overflow posts using the same method but still can't seem to get it working properly.
You can find my code on JSFiddle: https://jsfiddle.net/rs80dmn5/5/
Below 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');
}
});
});
});
No errors are showing up, but nothing seems to be happening as expected.