跨瀏覽器的jQuery過渡動畫？

Question

在Firefox 3和IE7中都有jQuery 1.3動畫轉換嗎？我有一個包含多個錶行（25個或更多）的表，其中一些行開始隱藏（這些行都共享一個公共類;在本例中，它是「.hidden」）。在表頭中有一個「顯示更多」鏈接，通過.click（）綁定到將顯示隱藏行的函數，然後將「顯示更多」更改爲「顯示更少」並將.click（）更改爲一個相反的功能。

在每。點擊（）函數，有像

$(this).parents("tbody").children("tr.hidden").show(); 

與.show（）與.hide（）用於 「查看少」 功能替代的線。但是，如果我嘗試用.fadeIn（）/。fadeOut（）替換.show（）/。hide（），則IE會將它呈現爲與.show（）/。hide（）幾乎相同，除此之外需要一分鐘.hide（）才能生效。那裏沒有真正的動畫。在IE中劣勢，雖然它的作品很棒的Firefox。

如果我嘗試使用.slideDown（）/。slideUp（），它在IE中同樣很笨拙，幾乎與.show（）/。hide（）完全相同，除了在完成轉換之後出現奇怪的脈衝效果。 Firefox 3嗆它，顯然只是忘記了顯示的錶行的行寬，使整個事情看起來很糟糕。

那麼動畫只是在IE7吸？在這種情況下，是否有任何方法可以在兩種瀏覽器中都能正常順利地轉換？

Answer 1

根據jQuery's compatibility page這類事情是一個錯誤，應該報告。

Answer 2

對於IE而言，經常有多個並發動畫可能很難。 JavaScript引擎不在Safari或Firefox或Chrome附近。這適用於IE6和IE7。我還沒有用過IE8。

有一點可以幫助一點，就是在要嘗試動畫的元素上設置靜態高度。從CSS /佈局的角度來看，這通常並不理想，但是......這允許jQuery跳過必須首先計算每個元素的高度才能使元素的高度動畫的任務。

一般來說，您可能會以與單反相機相同的方式處理動畫。 （堅持在這裏）。如果您嘗試拍攝體育比賽的快照，任何攝影師都會建議提前設置焦距，ISO和快門速度。這樣相機就不必在每次拍攝之間計算所有這些東西，而只需按住快門按鈕並單擊單擊單擊即可。 A-團隊風格。

無論如何，當涉及到動畫時，請嘗試考慮JavaScript需要計算動畫發生的事情。不透明度，高度，計算高度（元素寬度+邊框+填充），屏幕位置，都是開始的好地方。

很多時候，實際上你可以看到jQuery在動畫開始時添加到DOM中（使用Firebug）。就像在不透明動畫上一樣，你可以看到style =「opacity：1;」在計數降到0之前加入。

Answer 3

當談論跨瀏覽器的表現時，我不會過於明確。坦率地說，我已經看到了一些沉重的JS動畫，會讓webkit哭泣，而FF和IE處理它很好。

你只需要考慮一下，瀏覽器有不同的CSS和JS實現，有時候會讓你很難指出你的呆板表現背後的罪魁禍首。

拿IE。如果你有一個塊級元素4000x4000和一個2x2透明的gif集合重複，每次你願意，移動元素IE將重繪2x2 gif並計算每個元素的alpha值，超過2000倍。 FF既可以緩存背景，也可以有明顯不同的重繪，無論哪種情況下，性能都無法比擬。它沒有說在手冊中，你只需要小心如何以及你在做什麼。