Resize Textarea smoothly

Question

I want to achieve this effect: when the user focuses the text area inside the form, it becomes higher, with blur it gets to its original size. This is what I have done so far: http://jsfiddle.net/jRYDw/

My code is:

$('textarea').focus(function(){ $(this).css('height','80px'); }); $('textarea').blur(function(){ $(this).css('height','40px'); }); 

What I want to do is to make the text area expand smoothly, is this possible?

Answer 1

I had to use the animation function

 $('textarea').focus(function(){ $(this).animate({height:'80px'}); }); $('textarea').blur(function(){ $(this).animate({height:'40px'}); }); 

You can specify the length of the animation, the easing function, and also a callback to complete the animation.

.animate (properties [, duration] [, easing] [, complete])

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

Demo