hcmn/addclass.css

## addclass.css
#button {
    background:#f8f8f8;
    width:100px;
    padding:3pt;
    text-align:center;
    font-weight:bold;
    -moz-border-radius:3pt;
    -webkit-border-radius:3pt;
    border-radius:3pt;
    border: 2px #EEE solid;
}
#writing {
    margin:4pt;
    text-align:center;
    height:100px;
    background:#f8e6d4;
}
.transition {
    width: 400px;
    height: 500px;
}

## index.html
<html>
<head>
  <title>Transitions!</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <link href="addclass.css" rel="stylesheet"/>
</head>
<body>
  <div id="button">Change</div>
  <div id="writing" class=" ui-corner-all">This box changes size when you click that button!</div>
</body>
</html>

## script.js
$(function() {
    	$( "#button" ).click(function() {

            // Add the class of 'transition' with the duration
            // of 1000 and a callback to callbackFunction as
            // parameters.
            $('#writing').addClass("transition",1000,callbackFunction);

		});

		function callbackFunction() {
			setTimeout(function() {

                // Remove the 'transition' class here
				$('#writing').removeClass("transition");

			}, 1500 );
		}
	});
	#button {
	background:#f8f8f8;
	width:100px;
	padding:3pt;
	text-align:center;
	font-weight:bold;
	-moz-border-radius:3pt;
	-webkit-border-radius:3pt;
	border-radius:3pt;
	border: 2px #EEE solid;
	}
	#writing {
	margin:4pt;
	text-align:center;
	height:100px;
	background:#f8e6d4;
	}
	.transition {
	width: 400px;
	height: 500px;
	}
	<html>
	<head>
	<title>Transitions!</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
	<script src="script.js"></script>
	<link href="addclass.css" rel="stylesheet"/>
	</head>
	<body>
	<div id="button">Change</div>
	<div id="writing" class=" ui-corner-all">This box changes size when you click that button!</div>
	</body>
	</html>
	$(function() {
	$( "#button" ).click(function() {

	// Add the class of 'transition' with the duration
	// of 1000 and a callback to callbackFunction as
	// parameters.
	$('#writing').addClass("transition",1000,callbackFunction);

	});

	function callbackFunction() {
	setTimeout(function() {

	// Remove the 'transition' class here
	$('#writing').removeClass("transition");

	}, 1500 );
	}
	});