更改表格宽度动画
问题描述:
是否可以平滑地动画表格的宽度。每秒百分之十会是一个好的比率。为什么它慢慢扩大并不断扩大?更改表格宽度动画
在负载 <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">
答
在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。
答
有几种方法可以做到这一点。如果您愿意承担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%
}
然后,当你想要开始转换时,只需将类“增长”添加到元素。
非常感谢,这将指向我在正确的方向! – uriah