Dimension Animation
Dimension animation is nothing but animating Dimension / Size of an element. Size is represented by "wid" and "ht" parameters. Dimension animation uses Utility function "dim()" for changing the dimension of an element.
					{
						to         : { wid : 200},
						anim       : "Dimension.smooth",
						duration   : 2000
					}


Example 1 - Simple Dimension animation in one direction
JS HTML CSS
		$.domLoaded(function() {

			$.get("#ani").on("click", function() {
			
				//animate element's width to 400
				$.get("#box1").animate({
					to : { wid : 400 },
					anim : "Dimension.smooth.return",
					repeat : 3,
					duration : 5000
				});
				
				//animate element's  height to 200
				$.get("#box2").animate({
					to : { ht : 200 },
					anim : "Dimension.smooth.return",
					repeat : 5,
					duration : 2000
				});				
				
			});		

		});							
						
<body>
	
	<input type="button" id="ani" value="Animate" /> 
	<br/>
	
	<div id="box1">3 times - X</div>
	<div id="box2">5 times - Y</div>

</body>
	div {
		margin : 10px;
		padding: 5px;
		background-color : #faa;
		width : 70px;
		height : 70px;		
	}
						
						
Result

Example 2 - Animate width and height simultaneously
JS HTML CSS
				$.domLoaded(function() {
			
			$.get("#ani").on("click", function() {
			
				// animate both width and height
				$.get("#box1").animate({
					to : { wid : 200, ht : 200 },
					anim : "Dimension.smooth",
					duration : 1000
				});		

			});		
		});						
				
<body>
	
	<input type="button" id="ani" value="Animate" /> 
	<br/>
	
	<div id="box1">X, Y</div>

</body>
	div {
		margin : 10px;
		padding: 5px;
		background-color : #faa;
		width : 70px;
		height : 70px;		
	}
						
						
Result

Example 3 - Increase width by 100 px by animation
JS HTML CSS
			$.domLoaded(function() {
		
			$.get("#ani").on("click", function() {
			
				// Animate width and increase by 100px
				$.get("#ani").on("click", function() {
					$.get("#box1").animate({
						to : { wid : "+100" },
						anim : "Dimension.smooth",
						duration : 1000
					});		

				});
			});
				

		});		
<body>
	
	<input type="button" id="ani" value="Animate" /> 
	<br/>
	
	<div id="box1">X - "+100"</div>

</body>
	div {
		margin : 10px;
		padding: 5px;
		background-color : #faa;
		width : 70px;
		height : 70px;		
	}
						
						
Result