Hinzufügen eines Ereignisses zu einer Liste von Elementen im Ansichtsfenster

Question

Ich habe viele Elemente auf der Seite. Ich benutze die Funktion, um zu prüfen, ob das Element im Ansichtsfenster ist oder nicht, wenn ja, füge eine Klasse mit Animation hinzu. Aber wie fügt man dem certaine-Element ein Ereignis hinzu, aber nicht allen. codpen

function isElementInViewport(elem) { 
 
     var $elem = $(elem); 
 

 
     // Get the scroll position of the page. 
 
     var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
 
     var viewportTop = $(scrollElem).scrollTop(); 
 
     var viewportBottom = viewportTop + $(window).height(); 
 

 
     // Get the position of the element on the page. 
 
     var elemTop = Math.round($elem.offset().top); 
 
     var elemBottom = elemTop + $elem.height(); 
 

 
     return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
 
    } 
 

 
function checkAnimation() { 
 
     var $newsArrowRight = $('.box .arrow'); 
 
//   for (var i = 0; i < $newsArrowRight.length; i++) { 
 
//   // if ($newsArrowRight.hasClass('fade-in-right-js')) return; 
 
//   if(isElementInViewport($newsArrowRight[i])){ 
 
//    console.log($newsArrowRight[i]); 
 
//    $newsArrowRight[i].addClass('fade-in-right-js'); 
 
//   } 
 

 
//   } 
 
     // $.map($newsArrowRight, function(e) { 
 
     // if (e.hasClass('fade-in-right-js')) return; 
 
     // if(isElementInViewport(e)){ 
 
     //  e.addClass('fade-in-right-js'); 
 
     // } 
 
     // }); 
 
     if ($newsArrowRight.hasClass('fade-in-right-js')) return; 
 
     // 
 
     if(isElementInViewport($newsArrowRight)){ 
 
      $newsArrowRight.addClass('fade-in-right-js'); 
 
     } 
 
     
 
    } 
 

 
    // Capture scroll events 
 
    $(window).scroll(function() { 
 
     checkAnimation(); 
 
    });

.box { 
 
    height: 40vh; 
 
    width: 20vh; 
 
    background: green; 
 
    margin-bottom: 1rem; 
 
    position: relative; 
 
} 
 
.box .arrow { 
 
    position: absolute; 
 
    bottom: 0; 
 
    font-size: 20px; 
 
    color: white; 
 
    transform: translateX(-90px); 
 
} 
 
.box .arrow.fade-in-right-js { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    -webkit-animation: fade-in-right 1s ease-in-out; 
 
    -moz-animation: fade-in-right 1s ease-in-out; 
 
    -ms-animation: fade-in-right 1s ease-in-out; 
 
    -o-animation: fade-in-right 1s ease-in-out; 
 
    animation: fade-in-right 1s ease-in-out; 
 
} 
 
@-moz-keyframes fade-in-right { 
 
    0% { 
 
    transform: translateX(-90px); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
} 
 
@-webkit-keyframes fade-in-right { 
 
    0% { 
 
    transform: translateX(-90px); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">Text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">text</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div> 
 
<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa! 
 
    <div class="arrow">arrow</div> 
 
</div>

Answer 1

Die Lösung ist ues $ pro codpen

function checkAnimation() { 
    var $newsArrowRight = $.find('.box .arrow'); 
    $.each($newsArrowRight, function() { 
     var element = $(this); 
     if (element.hasClass('fade-in-right-js')) return; 

     if(isElementInViewport(element)){ 
     element.addClass('fade-in-right-js'); 
    } 
    }); 
} 

// Capture scroll events 
$(window).scroll(function() { 
    checkAnimation(); 
});