jQuery animate（）在Firefox和Chrome/IE中不同

目前我正在測試我的網頁在不同的瀏覽器兼容性，但是，我遇到了Chrome（使用SRWare Iron）和IE中的我的jQuery animate()問題。jQuery animate（）在Firefox和Chrome/IE中不同

我用下面的代碼：

jQuery的

$('.element').animate({top:"50px"}, 1400);

HTML

<h1 class="element">testing text slide</h1>

CSS

body { 
    overflow: hidden; 
} 
h1 { 
    margin: 0; 
} 
    .element { 
    position: absolute; 
    bottom: -1000px; 
    left: 50px; 
    font: bold 72px Arial, sans-serif; 
}

我遇到的問題是，在Firefox（極光）中，element從屏幕底部（-1000像素）滑動到頂部像素爲50像素。

在Chrome和IE中，似乎發生的事情是element從頂部的0px滑動到頂部的50px，所以它非常短。如果我刪除了爲element設置動畫的jQuery，它位於-1000px（我認爲，它不在屏幕上，所以我認爲它就是它的位置）。

有沒有人有任何想法？我正在使用它製作動畫的其他元素在FF/IE/Chrome中正常工作。

來源

2012-07-11 John

我想這是因爲動畫試圖從當前設置值爲頂部進行動畫。如果沒有設置，它可以被瀏覽器設置爲「0」，這將具有比底部值更高的優先級。如果您使用「top：1000px」，會發生什麼情況？而不是「底部：-1000像素;」。這只是一個猜測，因爲我從手機上寫下來，無法測試它。 – insertusernamehere 2012-07-11 00:24:23

我將'bottom：-1000px'改爲'top：1900px'，它可以工作！ – John 2012-07-11 01:03:58

您應該始終只操縱top或bottom之一。現在你的CSS設置bottom，然後你的動畫改變top。由於這兩者顯然不是獨立的，如果你只設置和操縱其中的一個，你將更有可能獲得一致性。如果尚未設置top的值，那麼JavaScript動畫可能會獲得動畫將從其開始的top的不一致起始值。它可能會在某些瀏覽器中返回爲auto，而在其他瀏覽器中則返回一些數值。如果您不依賴未設置的值，則可以繞過整個不一致。

由於你的CSS設置bottom，我建議你動畫bottom也不是top。

來源

2012-07-11 00:23:50 jfriend00

謝謝！這幫了很多。我用你的和insertusernameheres答案來修復它，將'bottom：-1000px'更改爲'top：1900px'使它更好，更平滑。 – John 2012-07-11 01:03:01

jQuery animate（）在Firefox和Chrome/IE中不同

回答

相關問題