javascript - 使用 jquery waypoints 插件淡出元素

Question

正如您在 this jsfiddle 上看到的那样我试图在元素进入视口(viewport)时淡出元素，使用 waypoints plugin .不幸的是，这是行不通的——什么都没有消失。知道为什么吗？非常感谢

CSS 和 HTML

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.pre-block {
    background: green;
    width:90%;
    Height: 800px;
    margin-bottom:50px;
}
.block {
    background: red;
    width:90%;
    Height: 200px;
}
.col1, .col2, .col3, .col4 {
    float: left;
    width: 25%;
    background: red;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-weight: 300;
    height: 24px;
    vertical-align: middle;
    display: table-cell;
}
.c1 {
    background: #253151;
}
.c2 {
    background: #253151;
    border-left: 1px #FFF solid;
}
.c3 {
    background: #253151;
    border-left: 1px #FFF solid;
}
.c4 {
    background: #253151;
    border-left: 1px #FFF solid;
}


<div class="pre-block"></div>
<div class="block">
    <div class="col1 c1">dsqd</div>
    <div class="col2 c2">sdsqdss</div>
    <div class="col3 c3">sdqsdsq</div>
    <div class="col4 c4">sdsqd</div>
</div>
<script src="http://imakewebthings.com/jquery-waypoints/jquery.js">
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.js">

JS

$('.block').waypoint(function() {
   $(".col1").delay(10).fadeOut("slow");
   $(".col2").delay(20).fadeOut("slow");
   $(".col3").delay(30).fadeOut("slow");
   $(".col4").delay(40).fadeOut("slow");
}, { offset: 10 });

Answer 1

您提供的偏移量:10 无法轻易达到。增加偏移量，一切就完美了。