JQuery的动画属性？

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"; 
}); 

然后，如果你有合适的transition性质上textarea的设置，将动画。

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(...}); 

UPDATE

你可以做些什么这样避免收缩： 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/