jquery+animate.css实现下一步操作

1.css 样式

<link rel="stylesheet" href="animate.css" />
.box{
	width: 500px;
	overflow: hidden;
	
}
.slider{
	width: 100%;	
	float: left;	
	
	display: none;
	
}
.slider.active{
	display: block;
}
a{
	display: block;
	padding: 10px 20px;
	background-color: darkcyan;
}
.footer{
	width: 100%;
	height: 200px;
}

2.dom元素

<div class="box">
	<div class="slider active">
		
		 <a href="javascript:;" class="btn1"> 第一步</a>
	</div>
	<div class="slider">
		 
		 <a href="javascript:;" class="btn2">第二步</a>
	</div>
	<div class="slider">
		 第三步
	</div>
</div>

3.js

<script src="jquery.js"></script>
<script>
	$(".btn1").click(function(){
		 $(this).parents(".slider").addClass("animated slideOutLeft").removeClass("active").next(".slider").addClass("animated slideInRight active");
	})
	$(".btn2").click(function(){
		  $(this).parents(".slider").addClass("animated slideOutLeft").removeClass("active slideInRight").next(".slider").addClass("animated slideInRight active");
		 
	})
</script>