向下滚动时淡入，向上滚动时淡出 - 基于窗口中的元素位置

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

}); 
}); 
});

另一个注意事项：将此应用于容器可能会导致它出现故障。