Question

我们的想法是制作仅在视口中显示元素并且在添加类之间有延迟的脚本。现在，当你滚动并停止它的罚款时，但当你滚动进一步的脚本工作，因为它从一开始就再次返回，并再次向所有元素添加不透明度。但我需要将它仅应用于下一个不可见元素。怎么做？

＆＃13;

    $('.viewport').scroll( function(){
       $('.element').each( function(i, e){
          var bottom_of_object = $(this).position().top + $(this).outerHeight(),
              bottom_of_window = $('.viewport').scrollTop() + $('.viewport').height();
              if( bottom_of_window > bottom_of_object){ 
                setTimeout(function() {
                    $(e).css('opacity', '1');
                }, i * 1000);
                                   
            }
            
        }); 
    
    });

＆＃13;

* {
  box-sizing: border-box
}
body {
  background: #95B8D1;
  font-family: "Pt Sans", sans-serif;
}
.wrapper {
  max-width: 600px;
  margin: 50px auto;
  min-height: 100vh
}
.viewport {
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  color: #747474;
  background: #fff;
  font-size: 18px;
  padding: 20px;
}
.element {
  width: 45%;
  float: left;
  margin: 5px;
  opacity: 0;
  transition: 500ms;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper"> 
  <div class="viewport">
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
    <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div>
  </div>
</div>

＆＃13;

Answer 1

这可能是因为您在每个scroll事件中再次检查所有元素：

  $('.viewport').scroll( function(){
    $('.element').each( function(i, e){

为什么不将特定类添加到已标记的元素并从下一个元素开始。所以最初你会有这样的html类

<div class="element transparent">Lo...</div>

然后使用您的Javascript：

    $('.viewport').scroll( function(){
//mind additional class here
       $('.element.transparent').each( function(i, e){
          var bottom_of_object = $(this).position().top + $(this).outerHeight(),
              bottom_of_window = $('.viewport').scrollTop() + $('.viewport').height();
              if( bottom_of_window > bottom_of_object){ 
//remove from filter in next run
$(this).removeClass('transparent');
                setTimeout(function() {
                    $(e).css('opacity', '1');
                }, i * 1000);

            }

        }); 

    });

如何在视口中的元素上添加延迟类？

1 个答案: