当向下滚动时,每篇文章都会在进入浏览器视口(viewport)时显示出来。 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?如何实现这种滚动->淡入效果?
最佳答案
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);
}
});
});
关于jquery - 使用CSS在向下滚动时淡入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15590236/