滾動元素淡入淡出與關鍵幀無法正常工作

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

您只需要告訴每個函數添加動畫的元素和刪除改變不透明度的位，不透明度的變化已經是動畫的一部分。

工作實例

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

        });

    });

});