元素淡出不起作用正确

Question

我发现这个代码：DEMO

当你卷动元素，将出现的元素。但是，效果只是一个不透明的变化。

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

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

你只需要告诉每个功能的元素的动画添加到并取出位改变透明度，不透明度的变化是已经分开的动画。

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

     }); 

    }); 

});