Change Textarea size in a smooth way

Question

I want to achieve this effect: When the user focus a text area within a form, it gets higher, on blur gets to it's original size. This is what I have done so far: http://jsfiddle.net/jRYDw/

My code:

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

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

What I want to do is to make the textarea expands in a smooth way, is that possible?

Answer 1

I had to use animate function

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

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

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

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

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

DEMO