使用jquery waypoints插件來淡出元素的問題

Question

正如你在這個jsfiddle上看到的那樣，當他們使用waypoints插件進入視口時，我試圖淡出元素。 不幸的是，這不起作用 - 沒有任何消失。 知道為什么嗎？ 非常感謝

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

現場演示

它完美地運作。 我添加了一個alert('ok'); 到函數並使顯示iframe更小，我得到了預期的結果：

也許這種偏移會更好：

offset: $(window).height()