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/