在浏览器视图中显示元素时淡入淡出，否则淡出淡出

Question

我一直在玩jquery插件航点。我希望这个元素在浏览器视图时淡入淡出，在没有时淡出，但我还没有能够弄明白。我使用的元素是一个位置：绝对。我不确定这是否会影响剧本。

这是我与之合作的JSFiddle http://jsfiddle.net/LvjoLuvx/2/。 waypoints.js链接在外部资源中。

HTML

<li id="span">

    <img class="logo"></img>

</li>

CSS

#span{
    height: 2000px;
    list-style: none;
}

.logo{
    width: 20%;
    height: 30%;
    background-color: blue;
    margin-left: 40%;
    position: absolute;
}

JQUERY

$('.logo').waypoint(function(event, direction) {
    // Fade in here
    $(this).fadeIn(800);
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});