示例:
http://www.chartjs.org/
#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?我怎样才能实现这种滚动>淡化效果?
解决方法
Demo Fiddle
你想要这样的东西吗?
$(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); } }); });