Waypoints에서 $ .each()를 사용하는 데 문제가 있습니다. 나는 같은 방법을 사용하는 다른 stackoverflow 게시물을 보았다. 그래서 나는 뭔가를 놓칠지도 모른다. 도와주세요!jQuery Waypoints의 각 루프
나는 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. 그러나 아무 일도 일어나지 않고 있습니다.
'내부 this' 'handler' 함수는 여러분이 생각하는 것과 다르며,'.each' 안에있는 반복의 현재 요소가 아닌'Waypoint' 객체입니다. – DavidDomain