jQuery 使用css在向下滚动时淡入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15590236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade in element on scroll down using css
提问by Upvote
Example: http://www.chartjs.org/
When scrolling down each article shows up when it gets in the view-port of the browser. The css is
向下滚动时，每篇文章在进入浏览器的视口时都会显示出来。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;
}
I tried this css but it does not work. Is there some javascript that works together with the css? How can I achieve this kind of scroll->fadeIn effect?
我试过这个 css 但它不起作用。是否有一些 javascript 与 css 一起工作？我怎样才能实现这种滚动->淡入效果？
回答by Mohammad Adil
Demo Fiddle
演示小提琴
Do you want something like this ?
你想要这样的东西吗？
$(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);
}
});
});
回答by WiseStrawberry
Mohammeds answer does not take into account any absolutely positioned images... we should use offset instead of position
Mohammeds 的回答没有考虑任何绝对定位的图像......我们应该使用偏移而不是位置
$(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);
}
});
});
回答by jacbut
Because I read it in the comments:
因为我在评论中读到了：
If you want the object to fade in when 1/3of the object is visible, then use this code:
如果您希望对象在对象的1/3可见时淡入，请使用以下代码：
jQuery:
jQuery：
$(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())/3;
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);
}
});
});
});
Only line I changed, is this:
我只改变了一行，是这样的：
var bottom_of_object = $(this).position().top + ($(this).outerHeight())/3;
By changing /3to e.g. /4you can let it fade in, when 1/4 of the object is visible.
通过更改/3为例如/4您可以让它淡入，当对象的 1/4 可见时。
回答by Khandoker Hirok
Best Process:
最佳工艺：
HTML:
HTML：
<div id="container">
<div id="monster">Hello</div>
<div>Hello</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
</div>
jQuery:
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:
CSS：
#container
{
height:2000px;
}
#container DIV
{
margin:50px;
padding:50px;
background-color:pink;
}
.hideme
{
opacity:0;
}
