jQuery+HTML5仿WIn8界面交互动画特效

比较高端大气上档次的效果，但还有一些明显的BUG，拿来学习还是可以的

使用方法：

载入CSS样式文件

<link rel="stylesheet" href="css/demo-styles.css" />

载入必须的jQuery库文件和其他JS文件

<script src="js/jquery-1.8.2.min.js">script>
<script src="js/modernizr-1.5.min.js">script>
<script src="js/prefixfree.min.js">script>

最后加入一段初JS代码

<script>
function showDashBoard(){
  for(var i = 1; i <= 3; i++) {
	$('.col'+i).each(function(){
		$(this).addClass('fadeInForward-'+i).removeClass('fadeOutback');
	});
  }
}
function fadeDashBoard(){
  for(var i = 1; i <= 3; i++) {
	$('.col'+i).addClass('fadeOutback').removeClass('fadeInForward-'+i);
  }
}
$(".lock-thumb").click(function(){
	fadeDashBoard();
	$('.login-screen').addClass('slidePageInFromLeft').removeClass('slidePageBackLeft');
});
$('#unlock-button').click(function(){
	  $('.login-screen').removeClass('slidePageInFromLeft').addClass('slidePageBackLeft');
	  showDashBoard();
});
$('.big, .small').each(function(){
var $this= $(this),
	page = $this.data('page');
$this.on('click',function(){
  $('.page.'+page).addClass('openpage');
  fadeDashBoard();
})
});
$('.close-button').click(function(){
$(this).parent().addClass('slidePageLeft')
	  .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
			$(this).removeClass('slidePageLeft').removeClass('openpage');
		  });
  showDashBoard();
});
$('.view-demo-button').click(function(){
$(this).parent().addClass('slideDemoOverlayUp');
  showDashBoard();
});
script>