イメージfadeInはInternet ExplorerまたはFirefoxで動作しません

Question

イメージをフェードインする基本シーケンスがあります。合計3つの画像があり、それらは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は常に偽であるため、関数はまったく呼び出されません。

Firefox、Chrome、IEの両方で値が返されるように、$(document).scrollTopまたは$(window).scrollTopに変更してみてください。

$(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

あなたはそれのMOZ特定のバージョンを追加する必要がありますので、すべてのブラウザで同じCSS設定を持っている、とあなたは共通の問題を発見し、FFでinline-block doesntの仕事はない：

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

を*は、それが上記する必要があります注意してくださいIE私の知る限りでは、回避策については「通常の」inline-block

は次のとおりです。ここで

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

は、優れたブログのPOSですこれについてmozillaを作成してください：Blog Post