Javascript 卷轴上的图像淡入功能适用于某些图像，但不适用于其他图像

我有一个页面上有多个图像，我会添加更多，我需要图像淡入，因为你滚动到他们，最好开始淡入，因为你得到一半的图像

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

<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>

$（文档）.ready（函数（）{
var容器=$（“.image”）.fadeTo（0,0.0）；
$（窗口）。滚动（函数（）{
容器。每个（功能（i）{
var windowHeight=$（window.height（）；
var viewTop=$（window.scrollTop（）；
var viewBottom=viewTop+窗高；
var distanceFromTop=$（this）.offset（）.top-viewTop；
var distanceFromBottom=viewBottom-$（此）.offset（）.top-$（此）.height（）；
可见变量=（distanceFromTop+distanceFromBottom）=0；
如果（可见）{
如果（所有可见）{
$（this.stop（）.delay（0.fadeTo）（1000,0.99）；
} 
否则{
//$（this）.stop（）.delay（0）.fadeTo（1000,0.0）；
}
}
});
});
});

我的第一个问题是，第三个图像不会淡入，有时会，但大多数时候不会。第二个问题是，我想让图像在你到达图像一半时淡入，当你到达底部时，它们淡入

---

编辑：忘记包含演示：

对不起，忘记添加，我已经包含了一个指向演示的链接。第三个图像源为空。。这很奇怪，这就是我在html中的内容-