Animate to Class v0.2

# View the source code...

<style>
	#animation1{
		position:relative;
		float:left;
		width:15px;
		height:15px;
		background:#900;
	}
	.a1_class1{ width:50px; height:50px; }
	.a1_class2{ width:500px; }
	.a1_class3{ height:15px; }
	.a1_class4{ width:15px; }
</style>

<script>
	$("#go_animation1").click(function(){
		$("#animation1").animateToClass("a1_class1", 1000).animateToClass("a1_class2", 1000).animateToClass("a1_class3", 1000).animateToClass("a1_class4", 1000);
	});
</script>

# View the source code...

<style>
	#animation2{
		position:relative;
		float:left;
		width:500px;
		height:50px;
		background:#900;
	}
	.a2_class1{ opacity:0.5; }
	.a2_class2{ opacity:1; background-color:#003; }
	.a2_class3{ background-color:#900; }
</style>

<script>
	$("#go_animation2").click(function(){
		$("#animation2").animateToClass("a2_class1", 1000).animateToClass("a2_class2", 1000).animateToClass("a2_class3", 1000);
	});
</script>

# View the source code...

<style>
	#animation3{
		font-size:18px;
		color:#060;
	}
	.a3_class1{ font-size:10px; color:#333; }
	.a3_class2{ font-size:24px; }
	.a3_class3{ color:#060; }
	.a3_class4{ color:#63C; }
	.a3_class5{ font-size:18px;	color:#900; }
</style>

<script>
	$("#go_animation3").click(function(){
		$("#animation3").animateToClass("a3_class1", 1000).animateToClass("a3_class2", 1000).animateToClass("a3_class3", 1000).animateToClass("a3_class4", 1000).animateToClass("a3_class5", 1000);
	});
</script>

# View the source code...

<style>
	#animation4{
		position:relative;
		float:left;
		
		border:#C60;
		color: #666;
		background-color: #ccc;
		height: 200px;
		width: 300px;
		font-size: 15px;
		overflow: hidden;
		opacity: 1;
		border: 2px solid #aaa;
		margin: 0;
		padding: 5px;
	}
	
	.a4_class1{
		color: #000;
		background-color: #ff3300;
		height: 100px;
		width: 400px;
		font-size: 10px;
		opacity: 0.7;
		margin: 60px;
		padding: 60px;
		/*IF NOT IE ECHO SOLID...Ie cant animate borders with border-style...so remove it from IE*/
		border: #000 10px <?php if (!(strstr($_SERVER["HTTP_USER_AGENT"], "MSIE"))) { echo "solid"; } ?>;
	}
	
	.a4_class2{
		color: #666;
		background-color: #ccc;
		height: 200px;
		width: 300px;
		font-size: 15px;
		opacity: 1;
		/*IF NOT IE ECHO SOLID...Ie cant animate borders with border-style...so remove it from IE*/
		border: #AAA 2px <?php if (!(strstr($_SERVER["HTTP_USER_AGENT"], "MSIE"))) { echo "solid"; } ?>;
		margin: 0;
		padding: 5px;
	}
</style>

<script>
	$("#go_animation4").click(function(){
        $("#animation4").animateToClass("a4_class1", 500);
    });
    
    $("#back_animation4").click(function(){
        $("#animation4").animateToClass("a4_class2", 500);
    });

</script>