更改表格宽度动画答案

【问题标题】：Change table width animation更改表格宽度动画
【发布时间】：2012-01-02 14:28:23
【问题描述】：

是否可以平滑地为表格的宽度设置动画。每秒百分之十将是一个不错的速度。让它慢慢膨胀，不断膨胀？

加载中 <table id="01" width="80%" height="769">

1 秒 <table id="01" width="90%" height="769">

2 秒 <table id="01" width="100%" height="769">

3 秒 <table id="01" width="110%" height="769">

【问题讨论】：

标签： javascript jquery animation html-table width

【解决方案1】：

有几种方法可以做到这一点。如果您愿意假设支持 html5 的浏览器，请查看 css 转换和转换。转换更容易用于您需要的东西。你可以像这样定义你的CSS：

#01 {
    -moz-transition : width 3s; /* Firefox */
    -webkit-transition : width 3s; /* chrome and safari */
    -o-transition: width 3s; /* Opera */
    transition: width 3s;
    width : 80%;
}
#01.growing {
    width : 110%
}

然后，当您希望开始过渡时，只需将“成长”类添加到元素即可。

Here is an example

【讨论】：

【解决方案2】：

在JQuery 中，您可以链接.animate()s 以获得您想要的：

$('#table').animate({width: '+=' + $(this).width() * 0.1 + 'px'}, 1000).animate({width: '+=' + $(this).width() * 0.1 + 'px'}, 1000).animate({width: '+=' + $(this).width() * 0.1 + 'px'}, 1000).animate({width: '+=' + $(this).width() * 0.1 + 'px'}, 1000);

如果你想一步一步增加尺寸（即没有延迟）：

$('#table').animate({width: $(this).width() * 1.1 + 'px'}, 4000);

这是demo。

【讨论】：

【解决方案3】：

是的，这是可能的！（全天最简单的答案！）

但说真的.. 看看 javascript 平滑调整大小？或者如果你想使用一个库，有很多 ui 插件可以为大多数主要库执行此操作..

jQuery 对大多数人来说是显而易见的选择……但是对于这么简单的事情，我建议自己研究一下如何做。

here 是 jQuery 中的一个简单示例

【讨论】：

非常感谢您为我指明了正确的方向！