以平滑的方式更改Textarea尺寸

Question

我想实现这样的效果:当用户将一个文本区域聚焦在一个表单中时,它会变得更高,在模糊时会达到它的原始大小.这就是我到目前为止所做的:http://jsfiddle.net/jRYDw/

我的代码:

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

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

我想做的是让textarea以平滑的方式扩展,这可能吗？

Answer 1

我不得不使用动画功能

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

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

您可以指定动画的长度,缓动函数以及动画完成时的回调.

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

参考 - http://api.jquery.com/animate/

DEMO