元素淡出不起作用正確

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

     }); 

    }); 

});