Question

我使用类似的东西，用于自动增长（自动尺寸）textarea：

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

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

.animate() rows功能不起作用。

Answer 1

最好使用height CSS。只有当textarea设置为不包装文本时，您的代码才有效。

尝试这样的事情：

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

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

Answer 2

您也可以尝试：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/

Answer 3

试试这个

$('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/

Jquery动画属性？

3 个答案: