Jquery animate attribute?

Question

I use something like this, for auto growing (auto size) textarea:

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

How to add smooth animation to auto growing for code above?

Function .animate() with rows doesn't work.

Answer 1

It would be better to use height CSS. Your code only works if the textarea is set to not wrap text.

Try something like this:

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

Then, if you have suitable transition properties set on the textarea, it will animate.