How to animate the transition in jquery

Question

I am using jquery to expand increase the rows of the textarea from 1 to 4 on focus. Lets just say it is not very pleasing to the eye.

I want it to slowly ease from 1 rows to 4 rows.

I currently use

  $(document).ready(function(){
     $('.comment').focus(function(){
         $(this).attr('rows', '4');
     });
  });

How can I animate it to make it slide down slower.

I appreciate any help.

Thanks.

Answer 1

http://api.jquery.com/animate/

Gives some info on custom property animations. also making animation on css height attribute might make it look more pleasant to the eye.

Answer 2

Have you seen this ? I think it does exactly what you need... http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Sam