javascript - 更改高度并向下滑动文本区域

Question

单击文本区域后，我需要将文本区域的高度更改为 60px 并同时向下滑动，这样看起来就像一个流畅的动画。

这是 JSFiddle：http: //jsfiddle.net/MgcDU/6399/

HTML：

<div class="container">
  <div class="well">
      <textarea style="width:462px" placeholder="Comment..."></textarea>
  </div>
</div>

谢谢。:)

Answer 1

像这样的东西？

$('#comment').click(function() {

   $(this).css('height', '60px');

});

Answer 2

您需要的方法称为animate()并且有据可查。

现在为了你的小提琴，我编写了演示 animate 方法以及 focus() 和 blur() 方法的 jQuery 代码：

jQuery(document).ready(function ($){

    var element = $('.well textarea');
    var orig_height = element.height();
    var new_height = 60;

    // onfocus event handler
    element.focus(function (){
        $(this).animate({height: new_height + 'px'});
    });
    // onblur event handler
    element.blur(function (){
        $(this).animate({height: orig_height + 'px'});
    });
});

Answer 3

它作为动画效果更好......

$("textarea").on('focus',function (e, ui) {
    $(this).animate({
        height: "60px"
    }, 1500);
});

jsFiddle 演示

Answer 4

$('#comment').click(function () {

   $(this).fadeIn(3000, function() {
      $(this).css('height', '60px');
   });


   $(this).focusout(function() {
      $(this).css('height', '20px');
   }); 



});