滚动加载动画

Question

我正在构建一个寻呼机网站，我正在尝试滚动动画。问题是我的脚本似乎只对页面有效一次。例如，如果我向下滚动动画将只为所有class =“hideme”divs运行一次，如果我继续滚动它就不会有动画了。

<script type="text/javascript">
$(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.hideme' ).each( function(i){

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){

                $(this).addClass('animated rotateIn');
                     }
        }); 
    }); 
});
</script>

更新：rotateIn只是随机css关键帧动画，它会旋转然后停止。

动画：

    @-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@-moz-keyframes rotateIn {
    0% {
        -moz-transform-origin: center center;
        -moz-transform: rotate(-200deg);
        opacity: 0;
    }

    100% {
        -moz-transform-origin: center center;
        -moz-transform: rotate(0);
        opacity: 1;
    }
}
@-o-keyframes rotateIn {
    0% {
        -o-transform-origin: center center;
        -o-transform: rotate(-200deg);
        opacity: 0;
    }

    100% {
        -o-transform-origin: center center;
        -o-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-200deg);
        opacity: 0;
    }

    100% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    -moz-animation-name: rotateIn;
    -o-animation-name: rotateIn;
    animation-name: rotateIn;
}