Question

是否可以平滑地设置表格的宽度。每秒百分之十是一个很好的速度。它会慢慢膨胀并不断扩大？

负载 <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">

Answer 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

Answer 2

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

$('#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。

Answer 3

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

但严重..看看javascript顺利调整大小？或者如果你想使用一个库，那么很多大型图书馆都会有很多ui插件。

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

here是jQuery中的一个快速示例

更改表格宽度动画

3 个答案: