迭代通过div的孩子与类内部：在jQuery中的nth孩子

Question

我想通过类的内部的div的孩子迭代。到目前为止它已经失败了。
这里是HTML：

<div class="insides"> 
    <div class="pen" style="background-image:url('images/video.png');background-size:cover"> 
     <div class="cover"></div> 
     <div class="items"> 
      <div class="title"> 
      fullscreen-centered-blurred-video-background 
     </div> 
     <div class="desc"> 
      Quick video covers fullscreen with blur effect and grayscale (looping) with working input fields 
     </div> 
     <a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/QpyrMb"> 
      View On CodePen 
     </a> 
     </div> 
    </div> 
    <div class="pen" style="background-image:url('images/form.png');background-size:cover"> 
     <div class="cover"></div> 
     <div class="items"> 
      <div class="title"> 
      Loading-form 
     </div> 
     <div class="desc"> 
      Simple and fast loading form that is displayed after loading is finished 
     </div> 
     <a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/PpZExY"> 
      View On CodePen 
     </a> 
     </div> 
    </div> 
    <div class="pen" style="background-image:url('images/horizontal.png');background-size:cover"> 
     <div class="cover"></div> 
     <div class="items"> 
      <div class="title"> 
      align-vertically 
     </div> 
     <div class="desc"> 
      Very easy javascript that aligns children vertically within its parents because css had weak support. 
     </div> 
     <a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/aJNEvB"> 
      View On CodePen 
     </a> 
     </div> 
    </div> 
    <div class="pen" style="background-image:url('images/navbar.png');background-size:cover"> 
     <div class="cover"></div> 
     <div class="items"> 
      <div class="title"> 
      navbar-animations 
     </div> 
     <div class="desc"> 
      navigation bar with 3 different animations. One more will be coming soon. 
     </div> 
     <a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/dvMpyV"> 
      View On CodePen 
     </a> 
     </div> 
    </div> 
</div> 

.pen具有透明度：0 ，当用户向下滚动一点点我希望他们通过1
这里要说明1是JavaScript：

$(document).ready(function(){  
    window.addEventListener('scroll',function(){ 
     var scroll = $(this).scrollTop(); 
     $('.content').css('transform', 'translateY('+ scroll/2 +'px)'); 

     if(scroll > 120){ 
      for(x = 0; x <= 4 ; x++){ 
       setTimeout(function(){ 
        $('.insides:nth-child('+ x +')').css('opacity','1'); 
       }, 700*x); 
      } 
     }else{ 
      for(x = 0; x <= 4 ; x++){ 
       setTimeout(function(){ 
        $('.insides:nth-child('+ x +')').css('opacity','0'); 
       }, 700*x); 
      } 
     } 

    }); 

    var scroll = $(this).scrollTop(); 

     if(scroll > 120){ 
      for(x = 0; x <= 4 ; x++){ 
       setTimeout(function(){ 
        $('.insides:nth-child('+ x +')').css('opacity','1'); 
       }, 700*x); 
      } 
     }else{ 
      for(x = 0; x <= 4 ; x++){ 
       setTimeout(function(){ 
        $('.insides:nth-child('+ x +')').css('opacity','0'); 
       }, 700*x); 
      } 
     } 

}); 

我真的不知道为什么它不起作用。它只是不显示
这里是一个的jsfiddle：https://jsfiddle.net/f176ch6r/
它不会在小提琴看起来很完美，但它的工作

Answer 1

两个问题在这里：

• 的第n个孩子选择器必须您.pen元素被应用
• 因为setTimeout的所有的$（“内部：第n个孩子（‘+ X +’）”）选择将具有相同的X

她e是什么，我会写：

window.addEventListener('scroll', _onScroll); 
_onScroll(); 

function _onScroll(){ 
    var x, 
     scroll = $(this).scrollTop(), 
     show = scroll > 120; 

    $('.content').css('transform', 'translateY('+ scroll/2 +'px)'); 
    for(x = 0; x <= 4 ; x++){ 
     _toggle(x, show); 
    } 
} 

function _toggle(index, bShow){ 
    setTimeout(function(){ 
     $('.insides .pen:nth-child('+ (index + 1) +')').css('opacity', bShow ? 1 : 0); 
    }, 700*index); 
} 

我也更新了jsfiddle