如何使用 jQuery animate 将焦点上的文本区域扩展到其他项目的顶部

Question

这已经被多次回答了，对于div和图像有很多方法，但我找不到如何为textarea做到这一点的例子。

我希望textarea展开，而不是移动其下方的其他项目，而是在其顶部展开。我在下面有一个简单地扩展它的工作示例，但我想，如果我能得到它，对扩展进行动画处理，而不仅仅是将其捕捉得越来越大。

我不想使用position: absolute也不想使用除textarea以外的其他 html 元素。我也需要所有这些才能在表格中工作，我在下面的 html 中显示了该表格。

这是我的 html：

<table>
<tr>
    <td><textarea class="expand" rows="1" cols="10"></textarea></td>
</tr>
<tr>
    <td>Here is some text just below. I want it to not move.</td>
<tr>
<tr>

我的JavaScript：

$(document).ready(function () {
    $('#txt1').focus(function () {
        $(this).addClass('focused');
    });
    $('#txt1').blur(function () {
        $(this).removeClass('focused');
    });
});

还有我的 CSS：

.focused {
    position: relative;
    height: 10em !important;
    z-index: 1000;
}
textarea {
    width: 350px;
    height: 1em;
    line-height: 1em;
    resize: none;
}

Answer 1

选择一个：带position: absolute;的table或带float: left的div...

据我所知，在决定使用表时，必须使用positon: absolute;，因为您需要使用z-index:并流过其他元素。将float: left与table一起使用将清除浮点数。否则，您可以非常轻松地使用float: left。

请参阅工作小提琴：http://jsfiddle.net/digitalextremist/JdA6L/

$(window).load(function () {
    $('textarea.expand').focus(function () {
        $(this).addClass("expanding")
        $(this).animate({
            height: "10em"
        }, 500);
    });
    $('textarea.expand').blur(function () {
        $(this).animate({
            height: "1em"
        }, 500);
        $(this).removeClass("expanding")
    });
});

添加了一个 CSS 类：

.expanding {
    position: absolute;
    z-index: 9;
}