向下滾動時淡入，向上滾動時淡出 - 基於窗口中的元素位置

Question

當它們在窗口中完全可見時，我試圖讓一系列元素在向下滾動時淡入。 如果我繼續向下滾動，我不希望它們淡出，但如果我向上滾動，我確實希望它們淡出。

這是我找到的最接近的 jsfiddle。 http://jsfiddle.net/tcloninger/e5qaD/

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

        }    
    }); 
}); 
});

它在向下滾動時完全符合我的要求，但我也希望元素在我向上滾動時淡出它們。

我沒有運氣就試過這個。

            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},500);  

            } else {

               $(this).animate({'opacity':'0'},500); }

非常感謝您花時間看這個。

Answer 1

您的嘗試無效的原因是因為兩個動畫（淡入和淡出）相互對抗。

就在對象變得可見之前，它仍然不可見，因此淡出動畫會運行。 然后，在同一對象變得可見的幾分之一秒后，淡入動畫將嘗試運行，但淡出仍在運行。 所以他們會互相對抗，你什么也看不到。

最終對象將變得可見（大部分時間），但這需要一段時間。 如果您使用滾動條按鈕上的箭頭按鈕向下滾動，動畫就會起作用，因為您將使用更大的增量滾動，從而減少滾動事件。

---

解釋夠了，解決方案（JS、CSS、HTML）：

 $(window).on("load",function() { $(window).scroll(function() { var windowBottom = $(this).scrollTop() + $(this).innerHeight(); $(".fade").each(function() { /* Check the location of each desired element */ var objectBottom = $(this).offset().top + $(this).outerHeight(); /* If the element is completely within bounds of the window, fade it in */ if (objectBottom < windowBottom) { //object comes into view (scrolling down) if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);} } else { //object goes out of view (scrolling up) if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);} } }); }).scroll(); //invoke scroll-handler on page-load });

 .fade { margin: 50px; padding: 50px; background-color: lightgreen; opacity: 1; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div> <div class="fade">Fade In 01</div> <div class="fade">Fade In 02</div> <div class="fade">Fade In 03</div> <div class="fade">Fade In 04</div> <div class="fade">Fade In 05</div> <div class="fade">Fade In 06</div> <div class="fade">Fade In 07</div> <div class="fade">Fade In 08</div> <div class="fade">Fade In 09</div> <div class="fade">Fade In 10</div> </div>

（小提琴： http : //jsfiddle.net/eLwex993/2/ ）

• 我將淡入淡出代碼行包裹在一個 if 子句中： if ($(this).css("opacity")==0) {...} 。 這確保對象僅在opacity為0時淡入。 淡出也一樣。 這可以防止淡入和淡出相互影響，因為現在在一個對象上一次只有兩者中的一個運行。
• 我將.animate()更改為.fadeTo() 。 它是 jQuery 的不透明度專用函數，編寫起來要短得多，而且可能比動畫更輕。
• 我將.position()更改為.offset() 。 這總是相對於身體計算，而位置是相對於父級的。 對於你的情況，我相信抵消是要走的路。
• 我將$(window).height()改為$(window).innerHeight() 。 根據我的經驗，后者更可靠。
• 直接在滾動處理程序之后，我在頁面加載時使用$(window).scroll();調用該處理程序一次$(window).scroll(); . 現在您可以為頁面上的所有所需對象提供.fade類，並且在頁面加載時不可見的對象將立即淡出。
• 我從 HTML 和 CSS 中刪除了#container ，因為（至少對於這個答案）它不是必需的。 （我想也許你需要height:2000px因為你使用了.position()而不是.offset() ，否則我不知道。當然可以把它留在你的代碼中。）

---

更新

如果您想要0和1以外的不透明度值，請使用以下代碼：

 $(window).on("load",function() { function fade(pageLoad) { var windowBottom = $(window).scrollTop() + $(window).innerHeight(); var min = 0.3; var max = 0.7; var threshold = 0.01; $(".fade").each(function() { /* Check the location of each desired element */ var objectBottom = $(this).offset().top + $(this).outerHeight(); /* If the element is completely within bounds of the window, fade it in */ if (objectBottom < windowBottom) { //object comes into view (scrolling down) if ($(this).css("opacity")<=min+threshold || pageLoad) {$(this).fadeTo(500,max);} } else { //object goes out of view (scrolling up) if ($(this).css("opacity")>=max-threshold || pageLoad) {$(this).fadeTo(500,min);} } }); } fade(true); //fade elements on page-load $(window).scroll(function(){fade(false);}); //fade elements on scroll });

 .fade { margin: 50px; padding: 50px; background-color: lightgreen; opacity: 1; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div> <div class="fade">Fade In 01</div> <div class="fade">Fade In 02</div> <div class="fade">Fade In 03</div> <div class="fade">Fade In 04</div> <div class="fade">Fade In 05</div> <div class="fade">Fade In 06</div> <div class="fade">Fade In 07</div> <div class="fade">Fade In 08</div> <div class="fade">Fade In 09</div> <div class="fade">Fade In 10</div> </div>

（小提琴： http : //jsfiddle.net/eLwex993/3/ ）

• 我在 if 子句中添加了一個閾值，請參閱下面的說明。
• 我在函數開始時為threshold和min/max創建了變量。 在函數的其余部分，這些變量被引用。 這樣，如果您想再次更改這些值，只需在一個地方進行。
• 我還加了|| pageLoad || pageLoad到 if 子句。 這對於確保所有對象在頁面加載時淡化到正確的不透明度是必要的。 pageLoad是一個布爾值，在調用fade()時作為參數發送。
  我不得不將淡入淡出代碼放在額外的function fade() {...} ，以便在調用滾動處理程序時能夠沿着pageLoad布爾值發送。
  我沒有看到任何其他方法可以做到這一點，如果有人這樣做，請發表評論。

解釋：
您小提琴中的代碼不起作用的原因是，實際的不透明度值總是與您設置的值略有不同。 因此，如果您將不透明度設置為0.3 ，則實際值（在本例中）為0.300000011920929 。 這只是您必須通過跟蹤和錯誤學習的那些小錯誤之一。 這就是這個 if 子句不起作用的原因： if ($(this).css("opacity") == 0.3) {...} 。

我添加了一個閾值，以將這種差異考慮在內： == 0.3變為<= 0.31 。
（我已將閾值設置為0.01 ，當然可以更改，只要實際不透明度介於設置值和此閾值之間即可。）

運算符現在從==更改為<=和>= 。

---

更新 2：

如果要根據元素的可見百分比淡化元素，請使用以下代碼：

 $(window).on("load",function() { function fade(pageLoad) { var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight(); var min=0.3, max=0.7, threshold=0.01; $(".fade").each(function() { /* Check the location of each desired element */ var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight; /* Fade element in/out based on its visible percentage */ if (objectTop < windowTop) { if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));} else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);} } else if (objectBottom > windowBottom) { if (objectTop < windowBottom) {$(this).fadeTo(0,min+((max-min)*((windowBottom-objectTop)/objectHeight)));} else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);} } else if ($(this).css("opacity")<=max-threshold || pageLoad) {$(this).fadeTo(0,max);} }); } fade(true); //fade elements on page-load $(window).scroll(function(){fade(false);}); //fade elements on scroll });

 .fade { margin: 50px; padding: 50px; background-color: lightgreen; opacity: 1; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div> <div class="fade">Fade In 01</div> <div class="fade">Fade In 02</div> <div class="fade">Fade In 03</div> <div class="fade">Fade In 04</div> <div class="fade">Fade In 05</div> <div class="fade">Fade In 06</div> <div class="fade">Fade In 07</div> <div class="fade">Fade In 08</div> <div class="fade">Fade In 09</div> <div class="fade">Fade In 10</div> </div>

（小提琴： http : //jsfiddle.net/eLwex993/5/ ）

Answer 2

我稍微調整了您的代碼，使其更加健壯。 在漸進增強方面，在 JavaScript 中擁有所有淡入淡出邏輯可能會更好。 在 myfunksyde 的例子中，任何沒有 JavaScript 的用戶都看不到任何東西，因為opacity: 0; .

    $(window).on("load",function() {
    function fade() {
        var animation_height = $(window).innerHeight() * 0.25;
        var ratio = Math.round( (1 / animation_height) * 10000 ) / 10000;

        $('.fade').each(function() {

            var objectTop = $(this).offset().top;
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();

            if ( objectTop < windowBottom ) {
                if ( objectTop < windowBottom - animation_height ) {
                    $(this).html( 'fully visible' );
                    $(this).css( {
                        transition: 'opacity 0.1s linear',
                        opacity: 1
                    } );

                } else {
                    $(this).html( 'fading in/out' );
                    $(this).css( {
                        transition: 'opacity 0.25s linear',
                        opacity: (windowBottom - objectTop) * ratio
                    } );
                }
            } else {
                $(this).html( 'not visible' );
                $(this).css( 'opacity', 0 );
            }
        });
    }
    $('.fade').css( 'opacity', 0 );
    fade();
    $(window).scroll(function() {fade();});
});

在這里看到它： http : //jsfiddle.net/78xjLnu1/16/

干杯，馬丁

Answer 3

我知道已經晚了，但我采用了原始代碼並更改了一些內容以輕松控制 css。 所以我用 addClass() 和 removeClass() 做了一個代碼

這里的完整代碼： http : //jsfiddle.net/e5qaD/4837/

        if( bottom_of_window > bottom_of_object ){
            $(this).addClass('showme');
       }
        if( bottom_of_window < bottom_of_object ){
            $(this).removeClass('showme');

Answer 4

對不起，這是舊線程，但我想有些人仍然需要這個，

注意：我使用 Animate.css 庫來實現淡入淡出動畫。

我使用了您的代碼並剛剛添加了 .hidden 類（使用引導程序的隱藏類），但您仍然可以定義.hidden { opacity: 0; } .hidden { opacity: 0; }

$(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).removeClass('hidden');
        $(this).addClass('animated fadeInUp');
    }    else {
            $(this).addClass('hidden');
               }

}); 
}); 
});

另一個注意事項：將此應用於容器可能會導致它出現故障。