jQuery的.animate（）跳動1頁上，但不是在另一頁

Question

我使用下面的代碼在這裏：

function toggle_visibility(id, h4id) 
{ 
    var e = $("#" + id); 
    var h = $("#" + h4id); 
    h.css({'padding': '0 0 0 20px'}); 
    e.animate({height: 'toggle'}, 400, function(){ 
     var vImg = e.is(':visible') ? 'minus' : 'plus'; 
     h.css({'background-image': 'url(/images/' + vImg + '.png)'}); 
    }); 
} 

如果您在本頁面到這裏看看：http://opportunityfinance.net/industry/ 做工精細

如果你在這裏看一下這裏：http://opportunityfinance.net/consulting/default.aspx?id=6474 這真的是動畫片。當您單擊它滑動並單擊它以滑動時，它會跳轉。

我試圖確定可能導致此問題的兩頁之間的差異，並且似乎無法理解爲什麼它不會在第二頁上沒有跳轉或下滑。

我該如何解決這個問題？在SO上已經閱讀過幾個問題和答案，但沒有運氣。

謝謝你們，讓我知道如果你需要更多的信息。

Answer 1

問題在於您正在動畫打開和關閉的div內的複雜內容。在你的第一個例子中，你有一小段純文本。在你的第二個例子中，你有嵌入的視頻。

您可能會調查使用基於CSS3的動畫是否可以爲複雜內容提供更好的性能。

Answer 2

這與我所知道的內容的高度有關 - 即第一頁的切換內容非常短，所以400的動畫速度足夠平滑地動畫到全高，而在第二頁面的擴展速度要快得多，因爲它比外部內容包裝器更高，當外部包裝器擴展以適應它時，就會發生跳轉。

我能想到的最佳解決方案是減慢動畫速度！

Answer 3

就像安格斯說的那樣，你的問題在於你的隱藏元素的高度每次都在變化，但你的時間不是動畫（400ms）。就這麼簡單。你的問題是，你有不同的高度相同的時間，所以嘗試用一個相對於高度的比例來改變你的時間。

Answer 4

使用jQuery SlideUp（）和SlideDown（）代替animate（）。它將工作...

Answer 5

好吧，這個問題是由於具有margin-bottom和margin-top設置爲1em的<h4>標籤。這對margin-top來說並不是什麼問題，因爲我在toggle2類中爲<h4>元素設置了一個5px的margin-top，它覆蓋了它，但仍然存在問題。

爲了解決這個問題，我都設置margin-top和margin-bottom到0px和div標籤中纏繞。<h4>Title</h4><div>contents</div>給予該div標籤margin-bottom設置爲1em。

這似乎已經解決了問題吧！謝謝，但我有一種感覺，邊距和/或填充導致了問題，我是對的！