更改表格宽度动画

是否可以平滑地动画表格的宽度。每秒百分之十会是一个好的比率。为什么它慢慢扩大并不断扩大？更改表格宽度动画

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

2011-11-21 uriah

在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。

来源

2011-11-21 00:31:52 fardjad

是的，它是可能的！（整天最简单的回答！）

但严重..看看javascript平滑调整大小？或者如果你想使用一个库有很多很多的插件，这将为大多数主要的图书馆做到这一点..

jQuery是最明显的选择...然而，对于这个简单的东西，我建议寻找如何做它自己。

here是jQuery的

一个简单的例子

来源

2011-11-21 00:12:50 rlemon

非常感谢，这将指向我在正确的方向！ – uriah

有几种方法可以做到这一点。如果您愿意承担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

来源

2011-11-21 00:24:27 idanzalz

更改表格宽度动画

回答

相关问题