Question

我找到了这段代码：DEMO

滚动元素时，会出现元素。但是，效果只是一种不透明的变化。

我尝试在元素出现时添加关键帧动画，但是当第一个元素出现时，所有其他元素同时出现。

$(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).css({'opacity':'1'});
              $('.e1').addClass('animated fadeInUp')
              $('.e2').addClass('animated fadeInLeft')  

            }

        }); 

    });

});

Answer 1

你只需要告诉每个函数添加动画的元素和删除改变不透明度的位，不透明度的变化已经是动画的一部分。

<强> Working Example

$(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 */
// Changes made here 
            if (bottom_of_window > bottom_of_object) {
                if ($(this).hasClass('e1')) {
                    $(this).addClass('animated fadeInUp');
                }
                if ($(this).hasClass('e2')) {
                    $(this).addClass('animated fadeInLeft');
                }
            }

        });

    });

});

滚动元素淡入淡出与关键帧无法正常工作

1 个答案: