滚动上的Javascript/CSS动画

我在一个个人网站上工作，遇到了一个问题。我使用此Javascript在元素进入视图时激活CSS动画：

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

    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

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

function checkAnimation() {
    var $elem = $('.slideUp');

    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

所以我可以让它为一个元素工作。但是，如果我将这个类附加到五个元素，一旦第一个元素在视图中，所有五个元素都将开始动画。最好的方法是什么，使每个元素都使用相同的类和相同的JS脚本，但每个元素在进入视图时都会动画化？我试过一些方法，但似乎不起作用。有什么建议吗？谢谢大家!

编辑：添加

首先，创建一个函数，用于检查视口中的哪个元素需要设置动画

大概是这样的：

 function checkAnimation() {
        var $elems = document.getElementsByClassName("slideUp");
        for(var i = 0; i < $elems.length; i++){
           if ($('.slideUp').eq(i).hasClass('start')) return;

           if (isElementInViewport($('.slideUp').eq(i))) {
             // Start the animation
             $('.slideUp').eq(i).removeClass('slideUp').addClass('start');
           }        
        }   
    }

最后，改变：

var $elem = $(elem); 

在

函数IsElementViewPort（elem）

中：

var $elem = elem;

因为我们已经传递了一个选定的元素

$(window).scroll(function () {
    checkAnimation();
});

var $elem = $(elem); 

var $elem = elem;