Question

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

我需要为这种平滑的动画制作动画，所以看起来不错。到目前为止，除了光滑的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();
    });

现在，文字区域刚刚射向全高。无论我将时间参数设置为什么，都没有流畅的动画，我正在制作动画。我该如何解决这个问题？

Answer 1

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

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Jquery：无法动画增长textarea的高度？从顶部成长？

1 个答案: