jQuery Waypoints의 각 루프

Question

Waypoints에서 $ .each()를 사용하는 데 문제가 있습니다. 나는 같은 방법을 사용하는 다른 stackoverflow 게시물을 보았다. 그래서 나는 뭔가를 놓칠지도 모른다. 도와주세요!

나는 JSFiddle에 그것을 가지고 : 여기

<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입니다 : 여기

https://jsfiddle.net/rs80dmn5/5/는 HTML입니다

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

내 JS한다

나는 어떤 전자도 얻지 못한다. rrors. 그러나 아무 일도 일어나지 않고 있습니다.

Answer 1

$ (이) (이) .waypoints는 ({.. 대신 소자 H2

의 웨이 객체를 참조 이것을 시도 :

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

    var self = $(this); 

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

Answer 2

$ .each 함수에 대한 두 가지 중요한 인수가 누락되었습니다. jQuery 선택에 this 대신 element을 사용하십시오. $ 내부

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