Image fadeIn not working with Internet Explorer or Firefox

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?

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

Related Articles