[英]Fade divs in and out on jQuery scroll
我有几个div,基本上只是彩色矩形,以帮助可视化。 当我向下滚动页面时,每个矩形应该根据滚动条位置fadeIn
或fadeOut
。 不幸的是,它变得怪异,褪色更像痉挛闪光灯。 我认为最好通过每个元素的滚动方式来确定不透明度水平,但我甚至不确定从哪个开始就是那种愚蠢。
似乎这家伙有类似的问题,但答案没有用。
jQuery的
$(document).ready(function(){
var $element_array = $("#content").find("div");
$(window).scroll(function(){
$element_array.each (function(){
if (($(this).position().top + $(this).height()) < $(window).scrollTop())
$(this).fadeIn();
if (($(this).position().top + $(this).height()) > $(window).scrollTop())
$(this).fadeOut();
});
});
});
HTML
<div id="content">
<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>
</div>
CSS
html,body{height:100%;margin:0;}
#content{
background:#333333;
height:2000px;
z-index:1;
}
#bg1{
background:blue;
height:400px;
width:100%;
z-index:2;
position:fixed;
top:100px;
display: none;
}
#bg2{
background:green;
height:400px;
width:100%;
z-index:3;
position:fixed;
top:200px;
display: none;
}
#bg3{
background:red;
height:400px;
width:100%;
z-index:4;
position:fixed;
top:300px;
display: none;
}
一个问题是$(this).position().top
为每个div返回0(由于它们的固定性质)。 您需要解析实际的css值。
第二个是fadeIn()
和fadeOut()
函数的本质。 如果你对fadeOut()
的项目调用fadeOut()
,那么如果你在页面上滚动一下,它就会落后。 但我没有在下面解决这个问题 。
我也把else
第一后if
因为代码路径(应该)是相互排斥的。
$(document).ready(function(){
var $element_array = $("#content").find("div");
$(window).scroll(function(){
$element_array.each (function(){
if ((parseInt($(this).css('top')) + $(this).height()) < $(window).scrollTop())
$(this).fadeIn();
else if ((parseInt($(this).css('top')) + $(this).height()) > $(window).scrollTop())
$(this).fadeOut();
});
});
});
每次单击并向下滚动页面时都会执行$(window).scroll()
处理程序,因此您将大量的fadeIn()
和fadeOut()
调用推送到jQuery的动画队列中 。 解决方案是在if
语句中有一些东西正在检查淡入淡出是否已经发生,如果是,则阻止向队列添加另一个动画,所以大致如下:
$(document).ready(function(){
var $element_array = $("#content").find("div");
var fades = 0;
$(window).scroll(function(){
$element_array.each (function(){
if (($(this).position().top + $(this).height()) < $(window).scrollTop() && (fades == 0))
$(this).fadeIn(function(){fades = 1;});
if (($(this).position().top + $(this).height()) > $(window).scrollTop() && (fades > 0))
$(this).fadeOut(function(){ fades = 0; });
});
});
});
只需从fadeOut条件中删除+ height(),因为它没有任何意义
$(document).ready(function(){
var remember = 0;
var $element_array = $("#content").find("div");
$(window).scroll(function(){
$element_array.each (function(){
if (($(this).position().top+ $(this).height()) < $(window).scrollTop()){
$(this).fadeIn();}
if (($(this).position().top ) > $(window).scrollTop())
$(this).fadeOut();
});
});
});
它会像香草冰一样工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.