jQuery jede Schleife in Wegpunkte

Question

Ich habe Probleme, ein $ .Each() in Wegpunkten arbeiten. Ich habe einige andere Stackoverflow-Posts gesehen, die dieselbe Methode verwenden. So kann ich etwas verpassen. Bitte helfen Sie!

Ich habe es auf JSFiddle: https://jsfiddle.net/rs80dmn5/5/

Hier ist die 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> 

Hier ist meine CSS:

$(document).ready(function(){ 

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

     $(this).waypoint({ 

      handler: function(){ 

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

      } 

     }); 

    }); 

}); 

:

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; 
} 

Hier meine JS

Ich bekomme keine e Richtig. Es passiert jedoch nichts.

Answer 1

$ (this) in $ (this) .waypoints ({.. bezieht sich auf den Wegpunkt-Objekt anstelle des Elements h2

Try this:

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

    var self = $(this); 

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

Answer 2

Ihnen fehlen die beiden wichtigen Argumente für die $ .each-Funktion. Verwenden Sie element anstelle von this für die jQuery-Selektionen.

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