Image fadeIn not working with Internet Explorer or Firefox

Question

我有一个在图像中淡入淡出的基本序列。总共有三个图像，它们是fadeIn。我在同一个页面上使用了同样的方法，而且它是有效的，所以我很困惑为什么它在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演示

为什么这不会在上述浏览器中显示？

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();
    }
  });
});

Answer 2

并非所有浏览器都有相同的CSS设置，并且您发现了一个常见问题，inline-block在FF中不起作用，因此您需要添加它的moz特定版本：

    display: -moz-inline-stack;
    display: inline-block;

*注意，它应该高于"正常"inline-block

就我所知，IE的解决方法是：

display: inline-block;
*zoom: 1;
*display: inline;

这里有一篇来自mozilla的优秀博客文章：博客文章