Fade w elemencie na Przewiń w dół za pomocą CSS

Question

Przykład: http://www.chartjs.org/

Podczas przewijania w dół każdy artykuł pojawia się, gdy robi się w widoku portu przeglądarki. CSS to

#examples article { 
    -webkit-transition: opacity 200ms ease-in-out; 
    -ms-transition: opacity 200ms ease-in-out; 
    -moz-transition: opacity 200ms ease-in-out; 
    -o-transition: opacity 200ms ease-in-out; 
    transition: opacity 200ms ease-in-out; 
    position: relative; 
    margin-top: 20px; 
    clear: both; 
} 

Próbowałem tego css, ale to nie działa. Czy jest jakiś javascript, który współpracuje z css? Jak mogę osiągnąć ten rodzaj efektu przewijania-> zanikania?

Answer 1

Demo Fiddle

Chcesz coś takiego?

$(window).scroll(function() { 

     /* Check the location of each desired element */ 
     $('.article').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).animate({ 
        'opacity': '1' 
       }, 500); 

      } 

     }); 

    }); 

Answer 2

Mohammeds odpowiedź nie uwzględnia żadnych absolutnie pozycjonowane obrazów ... powinniśmy używać zamiast przesunięcia pozycji

$(window).scroll(function() { 

    /* Check the location of each desired element */ 
    $('.article').each(function (i) { 

     var bottom_of_object = $(this).offset().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).animate({ 
       'opacity': '1' 
      }, 500); 

     } 
    }); 
});