利用Jq-Animate制作的一个很简单的HTML全屏过渡动画。总共有3个变化，包括大小，位置，透明度等等的变化。

Js代码：

var guodu = {
			guoduIndex: 0,
			guoduWidth: 0,
			guoduHeight: 0,
			Init: function() {
				guodu.guoduWidth = $(document.body).width();
				guodu.guoduHeight = $(window).height();
				$(".one").css("width", "0px").css("height", "0px").css("top", guodu.guoduHeight / 2   "px").css("left", guodu.guoduWidth / 2   "px");
				$(".item>div").css("margin-left", (guodu.guoduWidth - 800) / 2   "px").css("margin-top", (guodu.guoduHeight - 500) / 2   "px");
				$(".two").css("left", guodu.guoduWidth   "px");
				$(".three").css("left", guodu.guoduWidth * 2   "px");
				guodu.AnimateN(0);
			},
			AnimateN: function(a) {
				switch (a) {
				case 0:
				$(".one").css("z-index",999).css("width","0px").css("height","0px");
				$(".two").css("z-index",1);
					$(".one").css("display","block");
					$("#mark").children().css("background-color", "#fff");
					$(".two").css("left", guodu.guoduWidth   "px");
					$(".three").css("left", guodu.guoduWidth * 2   "px");
					$(".one").animate({
						width: guodu.guoduWidth   "px",
						height: guodu.guoduHeight   "px",
						left: guodu.guoduWidth / 2 - guodu.guoduWidth / 2   "px",
						top: guodu.guoduHeight / 2 - guodu.guoduHeight / 2   "px"
					}, 300);
					$(".markOne").css("background-color", "#0064c4").css("opacity", 1);
					guodu.guoduIndex = a;
				guodu.guoduIndex  ;
					break;
				case 1:
				
					$("#mark").children().css("background-color", "#fff");
					$(".markTwo").css("background-color", "#0064c4").css("opacity", 1);
					$(".two").css("z-index",999);
					$(".three").css("z-index",1);
					if (guodu.guoduIndex == 3) {
						$(".one").css("display","none");
						$(".two").animate({
							width: "500px",
							height: "300px",
							left: 200   "px",
							top: 200   "px"
						}, 800, function() {
							$(this).animate({
								width: guodu.guoduWidth   "0px",
								height: guodu.guoduHeight   "px",
								left: guodu.guoduWidth / 2 - guodu.guoduWidth / 2   "px",
								top: guodu.guoduHeight / 2 - guodu.guoduHeight / 2   "px"
							}, 500,function(){
								$(".three").css("left", guodu.guoduWidth * 2   "px").css("width", guodu.guoduWidth   "px").css("height", guodu.guoduHeight   "px").css("top","0px");
							});
						});
						$(".three").animate({
							width: "500px",
							height: "300px",
							left: guodu.guoduWidth  - 700   "px",
							top: 200   "px"
						});
					} else {
						$(".three").css("display","none");
						$(".one").animate({
							width: "500px",
							height: "300px",
							left: 200   "px",
							top: 200   "px"
						}, 500);
						$(".two").animate({
							width: "500px",
							height: "300px",
							left: guodu.guoduWidth - 700   "px",
							top: 200   "px"
						}, 500, function() {
							$(this).animate({
								width: guodu.guoduWidth   "0px",
								height: guodu.guoduHeight   "px",
								left: guodu.guoduWidth / 2 - guodu.guoduWidth / 2   "px",
								top: guodu.guoduHeight / 2 - guodu.guoduHeight / 2   "px"
							}, 500,function(){
								$(".one").animate({
								width: guodu.guoduWidth   "0px",
								height: guodu.guoduHeight   "px",
								left: "0px",
								top: "0px"
							}, 500);
							});
						});
					}

					break;
				case 2:
				$(".three").css("display","block").css("z-index",999);
				
					$("#mark").children().css("background-color", "#fff");
					$(".markThree").css("background-color", "#0064c4").css("opacity", 1);
					$(".three").css("opacity", 0);
					$(".three").animate({
						left: "0px",
						opacity: 1
					}, 500);
					break;

				}
				guodu.guoduIndex = a;
				guodu.guoduIndex  ;
			}
		}