4

私はWebアプリケーションで作業しており、テキストエリアがフォーカスを得たときにアニメーション効果でテキストエリアのサイズを変更したい(スムーズにサイズ変更したい)。

フォーカスゲインでテキストエリアのサイズを変更するために次のコードを試しましたが、スムーズにサイズ変更されません。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type='text/javascript'>
         function abc()
         {
           $('#txt').attr('rows',15);
         }
    </script>
</head>
<body>

<textarea id='txt' rows="4" onfocus='abc();' cols="50">
this is testing of textrea
</textarea>

</body>
</html>
4

5 に答える 5

10

IE9 以前のバージョンのサポートが必要ない場合は、純粋な CSS で問題を解決できます。

#txt {
    height:80px;
    transition: all 2s;
    -webkit-transition: all 2s; /* Safari */
}
#txt:focus {
    height:300px;
}

http://jsfiddle.net/MHC8T/

于 2013-10-10T19:10:32.737 に答える
2

これを試して：

function abc()
{
       $('#txt').animate({'height':"+=100px"}, 400);
}

高さを好きなように切り替えることができます.. +=100は相対的で、テキストエリアの高さに 100px を追加します

外部イベントハンドラとしても

$("#txt").bind("focusin",function abc(){
       $('#txt').animate({'height':"+=100px"}, 400);
});

それが役立つことを願っています

于 2013-10-10T19:01:01.217 に答える