Question

浏览器在到达该点时同时播放动画。那不是我想要的。浏览器必须播放每个分开的动画。

这是我的jQuery代码：

function initScrollAnimation (){

    $('.slideLeft').each( function(i){

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

            if( bottom_of_window > bottom_of_object){
                $( ".slideLeft" ).addClass('active');
            }; //else {
                //$( ".slideLeft" ).removeClass('active');
            //};
    }); 

    $('.slideRight').each( function(i){

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

            if( bottom_of_window > bottom_of_object){
                $( ".slideRight" ).addClass('active');
            }; //else {
                //$( ".slideLeft" ).removeClass('active');
            //};
    }); 

}

这是css代码

.slideLeft{
    margin-left:-25%;
}

    .slideRight{
        margin-right:-25%;
    }

.slideLeft.active{
    margin-left: 0%;
    transition: all 0.5s ease-in;
}

    .slideRight.active{
        margin-right: 0%;
        transition: all 0.5s ease-in;
    }

Answer 1

更改对象的转换时间

.slideLeft{
    margin-left:-25%;
}

    .slideRight{
        margin-right:-25%;
    }

.slideLeft.active{
    margin-left: 0%;
    transition: all 0.7s ease-in;
}

    .slideRight.active{
        margin-right: 0%;
        transition: all 0.3s ease-in;
}

或对其中一个div使用超时功能：

setTimeout(function(){
 $('.slideRight').each( function(i){

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

            if( bottom_of_window > bottom_of_object){
                $( ".slideRight" ).addClass('active');
            }; //else {
                //$( ".slideLeft" ).removeClass('active');
            //};
    }); 
}, 200);

Answer 2

如果你说你有不同位置的元素（垂直），并且想要在元素变得可见时触发动画：

只需将$( ".slideLeft" ).addClass('active');替换为$(this).addClass('active');

即可

目前您正在检查其中一个.slideLeft的位置，然后将active类添加到所有.slideLeft元素

与.slideRight

相同

jQuery，当元素在屏幕上时如何播放动画

2 个答案: