Jquery动画属性？答案

【问题标题】：Jquery animate attribute?Jquery动画属性？
【发布时间】：2013-03-17 12:32:10
【问题描述】：

我使用这样的东西来自动增长（自动调整大小）文本区域：

$('textarea').keyup(function() {
    $(this).attr('rows', $(this).val().split("\n").length);
});

如何为上面的代码添加平滑动画到自动增长？

函数 .animate() 和 rows 不起作用。

【问题讨论】：

这里不需要使用 jQuery 或 javascript - 只需使用 CSS3 过渡（在高度上设置）

标签： jquery jquery-animate autosize autogrow

【解决方案1】：

最好使用height CSS。仅当 textarea 设置为不换行时，您的代码才有效。

试试这样的：

$('textarea').keyup(function() {
    this.style.height = (this.scrollHeight+8)+"px";
});

然后，如果你在 textarea 上设置了合适的 transition 属性，它就会动画。

【讨论】：

伙计们，当输入一些键而不是换行时，您的代码正在增长，代码中的 8px（为什么是 8）是什么？

【解决方案2】：

试试这个

$('textarea').keyup(function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code==13) {
    $(this).attr('rows', $(this).val().split("\n").length + 1);
  }
});

http://jsfiddle.net/A8nxA/

【讨论】：

【解决方案3】：

你也可以试试：http://jsfiddle.net/bhzte/1/

$('textarea').keyup(function() {
    var that = $(this);
    var rows = that.val().split("\n").length;
    that.attr('rows', rows);
    var lh = parseInt(that.css('line-height');)
        that.animate({height:lh*rows})
});

您可以在css文件中设置行高，样式attr如<textarea style="18px"></textarea> 或使用 jquery：

$('textarea').css({'line-height':'18px'}).keyup(...});

更新

你可以这样做来避免缩小： http://jsfiddle.net/bhzte/4/

【讨论】：

好的，对不起，你必须为文本区域设置行高和像素值。查看更新