1

我正在建立一个寻呼机网站，我正在尝试在滚动上添加动画。问题是我的脚本似乎只为页面工作一次。例如，如果我向下滚动，动画将只对所有 class="hideme" div 运行一次，如果我继续滚动，则不再有动画。

<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;
}
4

0 回答 0