动画div宽度称为表格单元格 [英] animate div width styled as table-cell

问题描述

我创建了2列。第二个是240像素宽，第一个是所有可用的宽度。

I've created 2 columns. The 2nd is 240px wide and the 1st takes all available width.

下面显示在IE8& FF3.6：

The below displays fine in 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.两个浏览器在动画期间无法显示第2列。 （它运行在屏幕上，好像表布局是自动而不是固定的）

The problem is that I wish to animate the width of the 2nd cell from 240px to 0. Both browsers fail to display the 2nd column during the animation. (It runs off the screen as if the table layout was auto instead of fixed)

我一直在使用jQuery 1.4做动画，如果这是jQuery中的错误，那么定制的JavaScript实现。

I've been using jQuery 1.4 to do the animation though I'm open to a custom written Javascript implementation if this is a bug in jQuery.

我的jQuery代码基本上是：

My jQuery code is basically:

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

我非常感谢任何帮助动画这个东西：）

I'd greatly appreciate any help animating this thing :)

推荐答案

我相信我有一个工作。由于某些原因，动画maxWidth而不是宽度。

I believe I've got a work around. For some reason animating maxWidth instead of width works.

因此：

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

工作... Wierd但我会接受：）

Works... Wierd but I'll take it :)

这篇关于动画div宽度称为表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！