Edit in JSFiddle

$("#start-animation-button").click(function(){
	$("#animate-box-1")
		.animate({width: "100px"}, "slow")
		.animate({height: "100px"}, "slow")
		.queue(function(nextAnimation){
			$("#animate-box-2").animate(
				{
					width: "100px"
				},
				{
					duration: "slow",
					complete: function(){
						nextAnimation();
					}
				}
			);
		})
		.animate({opacity: 0.5}, "slow");
});

$("#reset-animation-button").click(function(){
	$(".animate-box").removeAttr("style");
});
.animate-box{
	background-color: #333333;
	width: 50px;
	height: 50px;
	margin-top: 10px;
}
<div class="animate-box" id="animate-box-1"></div>
<div class="animate-box" id="animate-box-2"></div>
<button type="button" id="start-animation-button">Alusta animeerimisega</button>
<button type="button" id="reset-animation-button">Reset</button>