設置為表格單元格的動畫div寬度

Question

我創建了2列。 第二個為240像素寬，第一個為所有可用寬度。

以下在IE8和FF3.6中顯示正常：

/*My Styles*/
div.table { display:table; border-collapse: collapse; table-layout:fixed; width:100%; border-spacing:0; padding:0; margin:0;}
div.cell  { display:table-cell; overflow:hidden;vertical-align:top;}


<div class="table">    
        <div class="cell" style="width:100%">
            <div id="tblWFWrap" class="tblWrap">
                <div id="tblWF" style="overflow:hidden">
                    <!--Content-->
                </div>
            </div>
        </div>

        <div id="wfCol" class="cell" style="width:240px;">
            <div id="ulWF" class="tblWrap" style="width:240px">
                <!--Content-->
            </div>
        </div>        
</div>

問題是我希望將第二個單元格的寬度從240px設置為0動畫。在動畫播放期間，兩個瀏覽器都無法顯示第二列。 （它在屏幕上運行，好像表格布局是自動而不是固定的）

我一直使用jQuery 1.4進行動畫處理，但是如果這是jQuery中的錯誤，我願意接受自定義的Javascript實現。

我的jQuery代碼基本上是：

$("#wfCol").animate({ width: 0 });

我非常感謝為該動畫設置動畫的任何幫助:)

Answer 1

我相信我已經解決了。 由於某種原因，設置maxWidth而不是width的效果是可行的。

所以：

<div id="wfCol" class="cell" style="width:240px; max-width:240px">
        <div id="ulWF" class="tblWrap" style="width:240px">
            <%=DashboardController.GetWorkflowString()%>
        </div>
    </div>

和

$wfCol.animate({ maxWidth: 0 });

作品...很奇怪，但我會接受的:)

Answer 2

只需刪除100％寬度的delcaration，默認情況下<div>就會擴展為該寬度，並且不會給出您正在談論的行為：

div.table { display:table; border-collapse: collapse; table-layout:fixed; border-spacing:0; padding:0; margin:0;}