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

这里有两个问题：

必须在您的.pen元素上应用第n个子选择器
因为setTimeout所有$（＆＃39; .insides：nth-child（＆＃39; + x +＆＃39;）＆＃39;）选择器将具有相同的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

使用类内部迭代div的子节点：jQuery中的nth-child

1 个答案: