skyguy skyguy - 4 months ago 19
CSS Question

Jquery: can't animate growing the height of textarea? Grow from top?

Ok I have a button and a hidden text area. On click, I want to expand the button to the width of the textarea and grow the text area from the top (as if it were expanding from a height of nothing to its full height).

I need to animate this grow smoothly, so it looks good. So far, Ive achieved all this except for the smooth textarea grow:

$(document).ready(function() {

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


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

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


Right now, the text area just shoots to its full height. There is no smooth animation no matter what I set the time parameter to and I am animating. How can I fix this?


Have a look at the code below, a simple example - run the snippet

	$('.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 */
textarea {
  font: 100%/1.3 Verdana, sans-serif;
body {
  background: #fafafa;
  color: #333;

textarea {
  display: block;
label {
  margin: 1em 0 .3em;
textarea {
  width: 30em;
<script src=""></script>
<label for="id2">textarea</label>
<textarea class="large-compact" name="text2" id="id2" cols="30" rows="10"></textarea>
<button id="button">
  Click me