Resim fade ınternet Explorer veya Firefox ile çalışmaz

Question

Görüntülerde solgun bir temel dizilim var. Toplam üç resim vardır ve fadeIn. Aynı sayfa boyunca aynı yönteme sahibim ve işe yarıyor, bu yüzden neden Internet Explorer ve Firefox'ta çalışmayacağımı karıştırıyorum.

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

Neden bu tarayıcılar içinden görüntüler olmaz sözü:

Bu benim kodudur?

Answer 1

$('body').scrollTop()'un kullanıldığı kaydırma işleyicisinde sorun var gibi görünüyor. Firefox ve IE'de her zaman 0 değerini geri döndürüyor gibi görünmektedir, oysa Chrome'da doğru değeri döndürür. Bu nedenle, pTop hiçbir zaman oTop'dan daha büyük değildir ve dolayısıyla if her zaman bozuktur ve bu yüzden işlev hiç çağrılmaz.

Her ikisi de Firefox, Chrome ve IE'de bir değer döndürdüğü için $(document).scrollTop veya $(window).scrollTop olarak değiştirmeyi deneyin.

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

Tüm tarayıcılar aynı CSS ayarlara sahip ve Moz bunun belirli sürümü eklemeniz gerekir böylece ortak bir sorunu, FF inline-block doesnt iş bulundu:

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

* yukarıda olması gerektiğine dikkat 'Normal' inline-block

IE için geçici çözüm olarak bildiğim kadarıyla geçerli: Burada

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

mükemmel bir blog pos olduğunu Bu konuda mozilla formu: Blog Post