skyguy skyguy - 5 months ago 23
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..");


$('.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();
});


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?

Answer

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

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