Fade trong phần tử trên cuộn xuống bằng css

Question

Ví dụ: http://www.chartjs.org/

Khi di chuyển xuống mỗi bài viết xuất hiện khi nó được trong giao diện cổng của trình duyệt. Css là

#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; 
} 

Tôi đã thử css nhưng không hoạt động. Có một số javascript mà làm việc cùng với css? Làm thế nào tôi có thể đạt được loại scroll-> fadeIn có hiệu lực?

Answer 1

Demo Fiddle

Bạn có muốn một cái gì đó như thế này?

$(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 câu trả lời không đưa vào tài khoản bất kỳ hình ảnh hoàn toàn vị trí ... chúng ta nên sử dụng bù đắp thay vì vị trí

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

     } 
    }); 
});