我的javascript调用被忽略但为什么？

Question

打破我想要实现的目标。当您向下滚动到某个div时，将调用动画并进行。 CSS工作正常，因此它应该很好地滑动。无论我在哪里放置它都会忽略js，因此触发器会在页面加载时发生，而不是在它到达div时发生。

所以这是我的代码......

       <script>
    $(window).scroll(function() {
        $('#thedevimage').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+1) {
                $(this).addClass("slideRight");
            }
        });
    });
</script>

这是html ...

<div class="thedev">

    <div class="left">

<div id="thedevimage" class="slideRight"><img src="images/xcode.png" style="width:100%;" /></div>
</div></div>

CSS ......

#thedevimage{
    width: 80%;
    visibility: hidden;
}

.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }           
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}