animate jquery textarea example

animate jquery textarea example

by Adi Jaya

HTML

<div id="form"> <!-- or with form -->
  <textarea id="area-comment"></textarea>
  <div class="area-button">
    <button id="send">SEND</button> 
    <button id="cancel">CANCEL</button>
  </div>
</div>

CSS

body {
  padding :35px;
  margin : 0 auto;
}
textarea {
  width : 100%;
  height :50px;
  resize : none;
}

JavaScript

$(function() {
	$('#area-comment').focus(function() {
    $(this).animate({"height": "225px",}, "fast"); 
    $('#form .area-button').slideDown("fast");
	});
  
	$('#send').click(function() {
  	var a = $('#area-comment').val();
    alert ('value = '+a+' ');
  });

	$('#cancel').click(function() {
		$('#area-comment').val('').animate({"height": "50px",}, "fast"); 
    $('#form .area-button').slideUp("fast");
  });
  
});