使用css向下滚动元素

示例： http ： //www.chartjs.org/

向下滚动时，每个文章都会显示在浏览器的视口中。 css是

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

我试过这个css但它不起作用。 有没有一些与CSS一起工作的JavaScript？ 我怎样才能实现这种滚动 – >淡入效果？

Answer 1

演示小提琴

你想要这样的东西吗？

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

穆罕默德的回答没有考虑任何绝对定位的图像……我们应该使用偏移而不是位置

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

Answer 3

最佳流程：

HTML：

 
 
Hello
 
Hello
 
Fade In
 
Fade In
 
Fade In
 
Fade In
 
Fade In
  

jQuery的：

 $(function(){ // $(document).ready shorthand $('.monster').fadeIn('slow'); }); $(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).animate({'opacity':'1'},1500); } }); }); }); 

CSS：

 #container { height:2000px; } #container DIV { margin:50px; padding:50px; background-color:pink; } .hideme { opacity:0; }