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

Answer 2

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

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

*请注意，它应该高于正常值＆＃39; inline-block

对于IE，据我所知，解决方法是：

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

以下是mozilla的一篇优秀博客文章：Blog Post

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

2 个答案: