图片淡入不适用于Internet Explorer或Firefox

我有一个基本的图像淡入淡出的顺序。总共有三个图像，他们fadeIn。我在这个页面中使用了相同的方法，并且它工作正常，所以我很困惑它为什么在Internet Explorer和Firefox中不起作用。图片淡入不适用于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

为什么会变成这样不是浏览器中显示提及？

来源

2016-04-03 Becky

在FF和IE11中工作得很好。我们能否将您的实际代码看作演示？也许你在做什么还有其他问题。 – Harry

@哈里你在这里：https://jsfiddle.net/caatkq57/。它在那里工作，只是不在FF和IE。 – Becky

这个小提琴在最新的FF（v45）和IE11 @Becky中运行良好。我刚刚更改了图片网址，因为您的图片无法访问我。你知道你必须滚动才能看起来正确吗？ – Harry

问题似乎是在使用$('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(); 
    } 
    }); 
});

来源

2016-04-03 07:30:11 Harry

并非所有浏览器具有相同的CSS设置，你发现了一个共同的问题，在FF inline-block不工作，所以你需要添加MOZ特定版本的它：

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

*注意它应该是上面“正常” inline-block

对于IE的解决办法，据我所知道的是：

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

这里是一个优秀的博客POS t关于这个mozilla形式：Blog Post

来源

2016-04-03 06:13:03 JordanHendrix

虽然我没有显示任何内容。 'fadeIn'不会自动将它放入块设置中吗？ – Becky

淡入淡出不会改变标签的默认功能，这是一种痛苦，我知道这很糟糕。检查它的博客文章....跨浏览器样式是这里的问题 – JordanHendrix

我没有'display：inline-block'任何地方。我有'display：none;'。这就是为什么我对你的答案感到困惑。 – Becky

图片淡入不适用于Internet Explorer或Firefox

回答

相关问题