jQuery：DIV上的幻燈片動畫更改其大小

我有一個簡單的HTML頁面，其中我試圖在DIV上應用幻燈片動畫。該DIV有沒有什麼花哨和描述如下：jQuery：DIV上的幻燈片動畫更改其大小

<body> 
    <div id="content" style="position:absolute; top: 5%; left: 5%; width:80%; 
           height:70%; color:#333; background:#eaeaea; 
           border:1px solid #333;"> 

      <input type="button" name="buttonId" value="click!"/> 

    </div> 
</body>

點擊按鈕調用一個jQuery動畫功能，這個DIV向右滑動：

$('#content').hide('slide', { direction: 'right' }, 1000); 
    $('#content').show('slide', { direction: 'right' }, 500);

現在，我面對的是問題，當DIV開始它的滑動動畫時，就會有一個明顯的「擠壓」其高度。一旦動畫完成，DIV恢復其實際高度。但通過動畫，DIV的高度仍然縮短。

我還觀察到，當我使用固定單元像px或em設置DIV的height屬性，則沒有這樣的壓縮。只有當高度設置爲%時纔會發生失真。

有人能告訴我是什麼原因造成的？

謝謝。

來源

2011-09-15 anirvan

您已經有問題的解決方案，在調用滑動動畫之前獲取元素的外部寬度並將其設置爲像素。向該功能添加回調，並在效果完成動畫後將其設回回百分比。

我不知道爲什麼它擠壓。

來源

2011-09-15 13:08:25 Drake

好吧，這是正確的。但我的問題更多的是理解**爲什麼**是這樣的？ – anirvan

jQuery：DIV上的幻燈片動畫更改其大小

回答

相關問題