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>