jquery - 将样式设置为表格单元格的动画 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 而不是宽度有效。

所以:

<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 });

工作...很奇怪，但我会接受 :)