javascript - 图像淡入不适用于 Internet Explorer 或 Firefox

Question

我有一个在图像中淡入淡出的基本序列。共有三张图片，它们淡入。我在同一个页面上使用了相同的方法并且它有效，所以我很困惑为什么它在 Internet Explorer 和 Firefox 中不起作用。

这是我的代码:

//Home Img delay/fadein
$(function() {
  var oTop = $('#home-img-block-section').offset().top - window.innerHeight;
  $(window).scroll(function() {

    var pTop = $('body').scrollTop();
    console.log(pTop + ' - ' + oTop);
    if (pTop > oTop) {
      imgDelays();
    }
  });
});


// For three image block resizing

$('.home-img-block img').addClass(function() {
  return (this.width / this.height > 1) ? 'wide' : 'tall';
});

function imgDelays() {
  $('.fadeBlock1').delay(300).fadeIn(500);
  $('.fadeBlock2').delay(600).fadeIn(500);
  $('.fadeBlock3').delay(900).fadeIn(500);
};

.home-img-block {
  width: 33.33%;
  float: left;
  display: none;
  overflow: hidden;
  position: relative;
}

<div class="home-img-block fadeBlock1"></div>

Fiddle Demo

为什么这不会在提到的浏览器中显示？

Answer 1

问题似乎出在使用 $('body').scrollTop() 的滚动处理程序中。它似乎总是在 Firefox 和 IE 中返回 0 值，而在 Chrome 中它返回正确的值。因此，pTop 永远不会大于 oTop，因此 if 始终为假，因此根本不会调用该函数.

尝试将其更改为 $(document).scrollTop 或 $(window).scrollTop，因为两者在 Firefox、Chrome 和 IE 中似乎都会返回一个值。

$(function() {
  var oTop = $('#home-img-block-section').offset().top - window.innerHeight;
  $(window).scroll(function() {

    var pTop = $(window).scrollTop();
    console.log(pTop + ' - ' + oTop);
    if (pTop > oTop) {
      imgDelays();
    }
  });
});