jQuery 做缓动动画

<div id="wrap"> <div class="page">  <div class="p p1"> page1 </div>  <div class="p p2"> page2 </div>  <div class="p p3"> page3 </div>  <div class="p p4"> page4 </div>  </div> <div class="page1"></div></div>

  *{ margin:0px;padding:0px;}  #wrap{ position: absolute; width:100%; height: 100%; overflow: hidden; }  .page,.page1{position:relative;}  .p1{ background: red;}   .p2{ background: green; }   .p3{ background: blue; }   .p4{ background:#000; }

<script src='/images/loading.gif' data-original="http://code.jquery.com/jquery-1.7.0.min.js"></script><script src='/images/loading.gif' data-original="jquery.easing.min.js"></script>

<script type="text/javascript">  var h = window.innerHeight;  var i = 0;  $("#wrap div").height(h);  $(".page1").html($(".page").html());  $("#wrap").click(function(){   if(i<4){     i++;     $(".page").stop().animate({top:-h*i},{easing:'easeInQuad', duration:1000});     if(i==4){      $(".page1").stop().animate({top:-h,Zindex:"10"},{easing:'easeInQuad', duration:1000});      $(".page").css({"top":"0px"});     }   }else{     i=1;     $(".page").stop().animate({top:-h*i},{easing:'easeInQuad', duration:1000});     $(".page1").stop().animate({top:-h,Zindex:"0"},{easing:'easeInQuad', duration:1000});   }  })</script>

原标题：jQuery 做缓动动画

关键词：jquery