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

Question

I have a basic sequence that fades in images. There are three images total and they fadeIn . I have this same method throughout this same page and it works, so I am confused why it will not work in Internet Explorer and Firefox.

This is my code:

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

Why would this not display within the browsers mentioned?

Answer 1

Problem seems to be within the scroll handler where $('body').scrollTop() is used. It seems to be returning a value of 0 always in Firefox and IE whereas in Chrome it returns the correct value. Due to this, the pTop is never greater than the oTop and hence the if is always falsy and so the function does not get called at all.

Try changing it to $(document).scrollTop or $(window).scrollTop as both seems to return a value in Firefox, Chrome and 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

Not all browsers have the same CSS settings, and you found a common problem, inline-block doesnt work in FF so you need to add the moz specific version of it:

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

*note it should be above the 'normal' inline-block

For IE the workaround as far as I know is:

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

Here is an excellent blog post form mozilla about this: Blog Post