使用jquery waypoints插件来淡出元素的问题

Question

你可以在this jsfiddle上看到我在尝试使用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无法到达小提琴。 增加偏移量，一切都很完美。

Answer 2

Live Demo

完美无缺。我在函数中添加了alert('ok');并使显示iframe稍微小一点，我得到了预期的结果：

也许这种偏移会更好：

offset: $(window).height()