javascript - jQuery:滚动时展开 div

Question

我有 4 个 div。默认情况下，第一个是“展开”/“打开”(它的 height 是 600px )。下面其他人有height 40px .

div:nth-child(1) {background-color:#cacaca;height:600px}
div:nth-child(2) {background-color:#e5ac30;height:40px}
div:nth-child(3) {background-color:#414042;height:40px}
div:nth-child(4) {background-color:#eaeaea;height:40px}

我如何“展开”(即将其 height 设置为 600px )第二个 div滚动时(例如滚动后 260px )，然后展开第三个(滚动时 500px )等等？ div 高度应在滚动时缓慢增加，并带有动画(不只是 height:40px->height:600px )。

这是一个简单的 JSFiddle有 4 个 div，只有第一个“展开”。

Answer 1

听window.scroll()

• > https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

并使用 JQuery animate 来扩展你的 div

• > http://api.jquery.com/animate/

或者 CSS transitions 和 jquery addclass 来扩展你的 div

• > http://www.w3schools.com/css/css3_transitions.asp
• > http://api.jquery.com/addclass/

JSFiddle http://jsfiddle.net/65s11L11/2/

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

div { 
    height: 40px;    
    -webkit-transition: height 2s; /* Safari */
    transition: height 2s;
}
div.expanded { 
    height:600px;        
}
div:nth-child(1) {background-color:#cacaca;}
div:nth-child(2) {background-color:#e5ac30;}
div:nth-child(3) {background-color:#414042;}
div:nth-child(4) {background-color:#eaeaea;}

JQuery

$($('div').get(0)).addClass('expanded');
$(window).on('scroll', function(e) {
    var x = $(window).scrollTop();
    if(x > 125) {
        $($('div').get(1)).addClass('expanded');
    }
});