Change Textarea size in a smooth way

html, javascript, jquery

Solution

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

Problem

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?

Original source