Jquery：不能动画增加文本区域的高度？从顶部成长？答案

【问题标题】：Jquery: can't animate growing the height of textarea? Grow from top?Jquery：不能动画增加文本区域的高度？从顶部成长？
【发布时间】：2016-06-24 15:04:02
【问题描述】：

好的，我有一个按钮和一个隐藏的文本区域。单击时，我想将按钮扩展到文本区域的宽度并从顶部扩大文本区域（就好像它从零高度扩展到全高一样）。

我需要为它制作平滑的动画，所以它看起来不错。到目前为止，除了平滑的 textarea 增长之外，我已经实现了所有这些：

$(document).ready(function() {

    console.log("Testing blurb..");


    $('.blurbEdit').hide();
    $('.blurbEdit').height(0);

    $('.changeBlurb').on('click', function(e){
        console.log("blurb clicked");

        var neww = $(".blurbEdit").css("width");
  $(this).animate({
    width: neww
  }, 200, function() {
    //$('.blurbEdit').animate ({height: 200;});
      $('.blurbEdit').animate({
    height: 200
  }, "normal");
    $(".blurbEdit").fadeIn(300, function() {
      $('.changeBlurb').hide();
    }).focus();

  });
        //$(".blurbEdit").show();
    });

现在，文本区域刚刚达到其最大高度。无论我将时间参数设置为什么并且我正在制作动画，都没有流畅的动画。我该如何解决这个问题？

【问题讨论】：

你可以简单地设置没有动画的高度并使用像这样的 css 过渡codepen.io/anon/pen/RRKrOz
但是由于我没有在焦点上做我在 .blurbEdit 按钮点击上做它，我在 : 之后的“选择器”使用什么？
为你添加了答案

标签： javascript jquery html css

【解决方案1】：

看看下面的代码，一个简单的例子——运行sn-p

$('#button').click(function(){
	$('.large-compact').css('width', '500px').css('height', '120px')
})

/* compress textareas until button clicked*/
textarea.large-compact {
  height: 30px;
  width: 60px;
  transition: all 1s ease-out;
}

/* reset */
body,
textarea {
  font: 100%/1.3 Verdana, sans-serif;
}
body {
  background: #fafafa;
  color: #333;
}

label,
textarea {
  display: block;
}
label {
  margin: 1em 0 .3em;
}
textarea {
  width: 30em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="id2">textarea</label>
<textarea class="large-compact" name="text2" id="id2" cols="30" rows="10"></textarea>
<button id="button">
  Click me
</button>

【讨论】：