使表格单元格高度逐渐变化

Question

I am aware how to make a table cell disappear but it happens in the blink of an eye. 我知道如何使表格单元消失，但眨眼间就会发生。 I want the table cell's height to gradually get smaller when a function is called. 我希望在调用函数时表格单元格的高度逐渐变小。 I am very new to Javascript and would appreciate the help. 我对Java非常陌生，希望能提供帮助。

Answer 1

In order to animate anything, it is easiest to use jQuery . 为了动画化任何东西，最简单的方法是使用jQuery 。 jQuery is a library of Javascript functions that makes life a lot easier. jQuery是一个Javascript函数库，可简化生活。 The function you need is .animate(). 您需要的功能是.animate（）。 To start, add this line of code in the <head> section of your page: 首先，将以下代码行添加到页面的<head>部分：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

Set up your table and give the row that you want to get taller the id heightchange (it can be anything. I'm using this in this example). 设置表格，并为要变高的行设置id heightchange （可以是任何值。在此示例中，我将使用此值）。 Then, add this to the head section of your HTML document (below the line you added above), add the following code: 然后，将其添加到HTML文档的开头部分（在上面添加的行下方），添加以下代码：

<script type="text/javascript>
    function expandTableRow() {
        $('#heightchange').animate({
            height: '200px'
        });
    }
</script>

Then, create your button like this: 然后，像这样创建您的按钮：

<a href="javascript:expandTableRow();">Click here to expand</a>

Answer 2

I am not quite sure how you imagine only one table cell changing in height. 我不太确定如何想象只有一个表格单元的高度发生变化。 But maybe you just want to achieve the appearing of a table cell content? 但是也许您只是想实现表格单元格内容的出现？

This could be done with a css3 transition: transition: color 1000ms linear; 这可以通过css3过渡来完成： transition: color 1000ms linear;

==> example code ==> 示例代码

使表格单元格高度逐渐变化

问题描述

2 个解决方案

解决方案1
1 2012-10-16 02:19:50

解决方案2
0 2012-10-16 02:39:50

使表格单元格高度逐渐变化

问题描述

2 个解决方案

解决方案1 1 2012-10-16 02:19:50

解决方案2 0 2012-10-16 02:39:50

解决方案1
1 2012-10-16 02:19:50

解决方案2
0 2012-10-16 02:39:50