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

Question

I found this code: DEMO

When you scroll over the element, the element appears. But, the effect is only an opacity change.

I tried to add a keyframe animation when the element appears but, when the first element appears, all others elements appear at the same time.

DEMO with Keyframe

$(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

You just need to tell the each function which elements to add the animations to and remove the bit changing the opacity, the opacity change is already apart of the animation.

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');
                }
            }

        });

    });

});