滚动图像淡入为某些图像而不是其他图像

Question

我有一个页面上有多个图像，我会添加更多，我需要在滚动到它们时淡入图像，最好在图像的一半处开始淡入。

首先，这是我到目前为止：

<script>
$(document).ready(function() {
    var container = $(".image").fadeTo(0, 0.0);

    $(window).scroll(function() {
        container.each(function(i) {

            var windowHeight = $(window).height();
            var viewTop = $(window).scrollTop();
            var viewBottom = viewTop + windowHeight;

            var distanceFromTop = $(this).offset().top - viewTop;
            var distanceFromBottom = viewBottom - $(this).offset().top - $(this).height();

            var visible = (distanceFromTop + distanceFromBottom) <= windowHeight;
            var allVisible = (distanceFromTop * distanceFromBottom) >= 0;

            if (visible) {
                if (allVisible) {
                    $(this).stop().delay(0).fadeTo(1000, 0.99);
                } 
                else {
                    //$(this).stop().delay(0).fadeTo(1000, 0.0);
                }
            }
        });
    });
});
</script>

我的第一个问题是，第三张图片没有淡入，有时它会，但大部分时间都没有。第二个问题是，当你到达图像的一半时，我希望图像淡入，当它们在你触底时淡入。

编辑：忘记包含演示：http://zimxtrial.ukbigbuy.com/