javascript - テキストエリアのサイズをスムーズに変更する

Question

私はこの効果を達成したい: ユーザーがフォーム内のテキスト領域に焦点を合わせると、それが高くなり、ぼかしが元のサイズになります。これは私がこれまで行ってきたことです: http://jsfiddle.net/jRYDw/

私のコード:

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

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

私がやりたいのは、テキストエリアをスムーズに拡張することです。それは可能ですか?

Answer 1

アニメーション機能を使用する必要がありました

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

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

アニメーションの長さ、イージング関数、およびアニメーションが完了したときのコールバックを指定できます。

.animate( プロパティ [, 期間] [, イージング] [, 完了] )

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

デモ