jQuery：無法動畫化文本區域的高度嗎？ 從頂部成長？

Question

好的，我有一個按鈕和一個隱藏的文本區域。 單擊時，我想將按鈕擴展到文本區域的寬度，並從頂部開始擴大文本區域（就像它從什么都沒有擴展到整個高度一樣）。

我需要使此動畫平滑生長，所以看起來不錯。 到目前為止，除平穩的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

看看下面的代碼，一個簡單的示例-運行代碼段

 $('#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>