淡入淡出jQuery滚动 [英] Fade divs in and out on jQuery scroll

问题描述

我有几个div，基本上只是五颜六色的矩形，以帮助可视化。当我向下滚动页面时，根据滚动条的位置，每个矩形应该 fadeIn 或 fadeOut 。不幸的是，它吓坏了，褪色更像一个痉挛的闪光灯。我认为，通过每个元素的多远，滚动的方式来确定不透明度水平会更好，但我甚至不知道从哪里开始讨论这个愚蠢。

似乎这家伙有类似的问题，但答案并不奏效

的 FIDDLE

jQuery
$ b

  $（文件）.ready（function（）{
 var $ element_array = $（＃content）。find（div）; 
 $（window）.scroll（function（）{$ b $ 。b $ element_array.each（函数（）{
如果（（$（本）.POSITION（）顶部+ $（本）.height（））≤; $（窗口）.scrollTop（））
 $（本）.fadeIn（）; 
如果（（$（本）.POSITION（）顶部+ $（本）.height（））> $（窗口）.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; 
宽度：100％; 
 z-index：2; 
位置：固定; 
 top：100px; 
 display：none; 
} 
＃bg2 {
 background：green; 
 height：400px; 
宽度：100％; 
 z-index：3; 
位置：固定; 
 top：200px; 
 display：none; 
} 
＃bg3 {
 background：red; 
 height：400px; 
宽度：100％; 
 z-index：4; 
位置：固定; 
 top：300px; 
 display：none; 
} 
  

解决方案

问题出在这里

一个问题是 $（this）.position（）。top 返回0每个div（由于它们的固定性质）。你需要解析实际的css值。

其次是函数 fadeIn（）和淡出（）。如果您在淡出的项目上调用 fadeOut（），那么如果在页面上滚动滚动，它会落后。

首先如果因为代码路径（应该）是互斥的。

  $（document）.ready（function（）{
 var $ element_array = $（＃content）。find（div）; 
 $（window）.scroll（function（）{
 $ element_array.each（函数（）{
如果（（parseInt函数（$（本）的CSS（ '顶部'））+ $（本）.height（））≤; $（窗口）。 scrollTop的（））
 $（本）.fadeIn（）; 
，否则如果（（parseInt函数（$（本）的CSS（ '顶部'））+ $（本）.height（））> ; $（window）.scrollTop（））
 $（this）.fadeOut（）; 
}）; 
}）; 
}）; 
  

I have a few divs which are essentially just colorful rectangles to help visualize. As I scroll down the page, each rectangle should fadeIn or fadeOut depending on scrollbar position. Unfortunately, it freaks out and the fade comes off more as a spastic strobe light. I think it would be better to determine the opacity level by how far along, scroll-wise, I am through each element, but I'm not even sure where to begin on that sillyness.

Seems this guy had a similar question, but the answer didn't work.

FIDDLE

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

解决方案

You've got a few problems here

One problem problem is is that $(this).position().top is returning 0 for each of the divs (due to their fixed nature). You need to parse the actual css value.

The second is in the nature of the functions fadeIn() and fadeOut(). If you call fadeOut() on an item that is faded out, it will lag behind if one scrolls agressively on your page. But I have not addressed that issue below.

I also put else after the first if because the code paths (should) be mutually exclusive.

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

这篇关于淡入淡出jQuery滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！