那些遇到过的问题

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

min*_*ite 13 javascript jquery scroll fade

当它们在窗口中完全可见时,我试图让一系列元素在向下滚动时淡入.如果我继续向下滚动,我不希望它们淡出,但如果我向上滚动,我确实希望它们淡出.

这是我发现的最接近的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);

        }    
    }); 
}); 
});
Run Code Online (Sandbox Code Playgroud)

它完全按照我想要的向下滚动,但如果我向上滚动它们,我也希望元素淡出.

我试了这个没有运气.

            if( bottom_of_window > bottom_of_object ){

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

            } else {

               $(this).animate({'opacity':'0'},500); }
Run Code Online (Sandbox Code Playgroud)

非常感谢您花时间看这个.

myf*_*ide 40

你的尝试不起作用的原因是因为两个动画(淡入和淡出)相互作用.

在对象变得可见之前,它仍然是不可见的,因此淡出的动画将会运行.然后,当相同的对象变得可见时,一小段时间后,淡入动画将尝试运行,但淡出仍然在运行.所以他们会相互对抗,你什么也看不见.

最终,对象将变得可见(大部分时间),但这需要一段时间.如果您使用滚动条按钮上的箭头按钮向下滚动,则动画会有效,因为您可以使用更大的增量滚动,从而创建更少的滚动事件.

足够的解释,解决方案(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
});
Run Code Online (Sandbox Code Playgroud) 
.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  opacity: 1;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)
(小提琴:http://jsfiddle.net/eLwex993/2/)

  • 我将淡入淡出代码行包装在if子句中:if ($(this).css("opacity")==0) {...}.这可以确保该对象仅在当褪色opacity是0.淡出一样.这可以防止淡入和淡出相互作用,因为现在只有一个在对象上同时运行.
  • 我换.animate()了.fadeTo().这是jQuery的不透明度的专用功能,写入时间要短得多,而且可能比动画更轻.
  • 我换.position()了.offset().这总是相对于身体计算,而位置是相对于父亲.对于你的情况,我认为偏移是要走的路.
  • 我换$(window).height()了$(window).innerHeight().根据我的经验,后者更可靠.
  • 直接在scroll-handler之后,我在页面加载时调用该处理程序一次$(window).scroll();.现在,您可以在页面上提供所有所需对象的.fade类,并且在页面加载时应该不可见的对象将立即淡出.
  • 我#container从HTML和CSS中删除了,因为(至少对于这个答案)没有必要.(我想也许你需要它,height:2000px因为你用的是.position()代替.offset(),否则我不知道.当然不要把它留在你的代码中.)

UPDATE

如果您想要除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
});
Run Code Online (Sandbox Code Playgroud) 
.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  opacity: 1;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)
(小提琴:http://jsfiddle.net/eLwex993/3/)

  • 我在if子句中添加了一个阈值,请参阅下面的说明.
  • 我创建了变量threshold并min/max在函数的开始.在函数的其余部分中,引用了这些变量.这样,如果您想再次更改值,则只需在一个位置进行.
  • 我还添加|| pageLoad了if子句.这是确保所有对象在页面加载时淡化到正确的不透明度所必需的.pageLoad是一个布尔值,在fade()调用时作为参数发送.
    我必须将淡入淡出代码放在额外的内部function fade() {...},以便能够在pageLoad调用scroll-handler时发送布尔值.
    我没有看到任何其他方法,如果有其他人这样做,请发表评论.

说明:小提琴中
的代码不起作用的原因是因为实际的不透明度值总是与您设置的值略有不同.因此,如果将不透明度设置为,则实际值(在本例中)为.这只是你必须通过追踪和错误一路学习的小错误之一.这就是为什么这个if子句不起作用的原因:.0.30.300000011920929if ($(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
});
Run Code Online (Sandbox Code Playgroud) 
.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  opacity: 1;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)
(小提琴:http://jsfiddle.net/eLwex993/5/)

小智 6

我稍微调整了您的代码，使其更加健壮。在渐进增强方面，在 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();});
});
Run Code Online (Sandbox Code Playgroud)

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

干杯，马丁

归档时间：

查看次数：

78542 次

最近记录：

8 年，8 月 前
相关归档
如何移动屏幕而不在Vim中移动光标？ 565
获取UTC时间戳 235
javascript中const和const {}之间的区别是什么？ 79
删除Javascript中的所有多个空格并替换为单个空格 76
我可以在event.target中使用哪些属性？ 74
JavaScript中Object.defineProperty（）的奇怪行为 70
Javascript/jQuery:拆分camelcase字符串并添加连字符而不是空格 57
我在哪里可以获得更多jQuery UI主题？ 31
如何检测列表视图是否在android中向上或向下滚动？ 10
swiftui 列表 - 快速滚动 6
难疑归档
如何将新的本地分支推送到远程Git存储库并跟踪它？ 4154
Python中追加与扩展列表方法的区别 3119
循环内的JavaScript闭包 - 简单实用的例子 2689
如何使用CSS垂直居中文本？ 2190
从HTML页面重定向 1523
如何在JavaScript中将十进制转换为十六进制？ 1387
为什么在允许某些Unicode字符的注释中执行Java代码？ 1326
如何使用jQuery按名称选择元素？ 1160
如何以CSV格式输出MySQL查询结果？ 1118
按ID删除元素 1085