圖片淡入不適用於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

回答

相關問題