动画在jQuery中打开/关闭表列 [英] Animating opening/closing of table columns in jQuery
问题描述
如何在jQuery中为表格列的打开/关闭设置动画？
How can I animate the opening/closing of table columns in jQuery?
我目前有这段代码：
jQuery(function($){
$(".togglebutton").click(function(e){
if (cost_visible) {
$(".numbers").animate({width: 80}, 1500);
$(".costs").animate({width: 0}, 1500);
} else {
$(".numbers").animate({width: 0}, 1500);
$(".costs").animate({width: 60}, 1500);
}
});
});
我的HTML包含带有TH和TD标签的标准TABLE / TR / TH / TD标签类名用于标识必须打开或关闭的内容。
and my HTML containing standard TABLE/TR/TH/TD tags with the TH and TD tags carrying the class names used to identify what has to be opened or closed.
问题似乎是在jQuery触及表后，受影响的单元突然感觉需要堆栈彼此的顶部，而不是整齐地连续排在一起。
The problem seems to be that after jQuery touches the table, the affected cells suddenly feel the need to stack on top of eachother instead of remaining neatly in a row.
我认为这与jQuery只能为块元素设置动画有关，而不是显示为表格式的元素。那么我可以用块元素制作一个表格吗？或者是否有另一种动画表格元素的方法？我发现这个建议解决方案，但是将动作中的所有表格元素包装到DIV中似乎很麻烦...
I assume this has to do with jQuery being only able to animate "block" elements, not elements that are displayed "table-like". So can I make a table out of block elements? Or is there another way to animate table-like elements? I've found this suggested solution, but it seems like a hassle to encase all your table elements into DIV's just for the animation...
推荐答案
研究，我发现......
After some study, I've found that...
- 问题确实是由jQuery设置的TH和TD项目显示：阻止动画项目。目前还没有办法让jQuery表现得不同。
- 将DIV标签中的TH和TD项目封闭不起作用，一些谷歌搜索提出 HTML变为无效。
- 在DIV代码中包含TH和TD项目的内容不起作用，内容在动画后开始浮动，并且不会保留在TH和TD项目中。
- 同一篇文章揭示了动画可以使用表格中的TBODY部分打开关闭表格行。
- The problem is indeed caused by the TH and TD items being set by jQuery to "display: block" items for animation. There is as of yet no way to make jQuery behave differently.
- Enclosing the TH and TD items in DIV tags does not work, some Google searching turns up the suggestion that HTML becomes invalid when using DIV tags within a TABLE structure.
- Enclosing the content of TH and TD items in DIV tags does not work, the content starts to float after animation and does not stay within the TH and TD items.
- The same article reveals that animating the opening closing of table rows is possible using TBODY sections within the table.
我成功了解了我想要的内容虽然，这是如何：
I succeeded in what I wanted though, and here's how:
- 我将表格切割成几个由列组组成的子表我想展示和隐藏
- 我将这些子表包含在DIV标签中并且浮动他们彼此相邻。
- 我使用jQuery显示/隐藏这些DIV。
- I cut the table into several sub-tables consisting of the column groups I want to show and hide
- I enclosed these sub-tables in DIV tags and floated them next to each other.
- I used jQuery to show/hide these DIV's.
我希望这对任何人都有帮助，如果找到更优雅的解决方案，请留言。
I hope that this helps anybody, and if a more elegant solution is found, please leave a message.
这篇关于动画在jQuery中打开/关闭表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
