在jQuery滾動中淡入淡出div

Question

我有幾個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;
}

Answer 1

你在這里遇到了一些問題

一個問題是$(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();
        });
    });
});

Answer 2

每次單擊並向下滾動頁面時都會執行$(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; });
        });
    });
});

http://jsfiddle.net/ruXeq/4/

Answer 3

只需從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();
        });

    });
});

http://jsfiddle.net/ruXeq/5/

它會像香草冰一樣工作