javascript - 根据窗口中的元素位置，向下滚动时淡入，向上滚动时淡出

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>

( fiddle :http://jsfiddle.net/eLwex993/2/ )

我将淡化代码行包装在if子句中:if ($(this).css("opacity")==0) {...}。这样可以确保仅当opacity为0时才淡入对象。淡出也一样。而且这可以防止淡入和淡出相互影响，因为现在在一个对象上一次只有两个运行之一。

我将.animate()更改为.fadeTo()。这是jQuery的不透明度专用功能，编写起来短得多，而且可能比动画更轻。

我将.position()更改为.offset()。这总是相对于 body 进行计算，而位置相对于父对象进行计算。对于您的情况，我认为补偿是要走的路。

我将$(window).height()更改为$(window).innerHeight()。根据我的经验，后者更可靠。

在滚动处理程序之后，我立即在页面加载时使用$(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>

( fiddle : http://jsfiddle.net/eLwex993/3/)

我为if子句添加了一个阈值，请参见下面的说明。

我在函数开始时为threshold和min/max创建了变量。在该函数的其余部分中，将引用这些变量。这样，如果您想再次更改值，则只需在一个地方进行。

我还为if-clause添加了|| pageLoad。这是确保页面加载时所有对象褪色到正确不透明度所必需的。 pageLoad是一个 bool 值，在调用fade()时作为参数发送。
我必须将淡入淡出代码放在额外的function fade() {...}中，以便在调用滚动处理程序时能够沿着pageLoad bool 值发送。
我没有看到其他方法可以执行此操作，如果还有其他方法，请发表评论。

说明:
your fiddle中的代码不起作用的原因是，由于实际的不透明度值始终与您将其设置为不透明值。因此，如果将不透明度设置为 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>

( fiddle : http://jsfiddle.net/eLwex993/5/)