div内のdivをクラス内で反復する：jQueryのnth-child

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

ここで2つの問題を行います。

• n番目の子セレクタ必見の（ '内部。：n番目の子（ '+ X +'）'）すべてのあなたの$ためのsetTimeoutのご.PEN要素
• に適用されるセレクタは彼女の

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