javascript - 使用内部类 :nth-child in jQuery 迭代 div 的子项

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/
它在 fiddle 中看起来并不完美，但它完成了工作

Answer 1

这里有两个问题:

• 第 n 个子选择器必须应用于您的 .pen 元素
• 由于 setTimeout，所有 $('.insides:nth-child('+ x +')') 选择器都将具有相同的 x

下面是我要写的:

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