jquery swiper入场和出场动画

jquery swiper入场和出场动画



    ...
     rel="stylesheet" href="path/to/swiper.min.css">
     rel="stylesheet" href="path/to/animate.min.css">


    ...
    <script src="path/to/swiper.min.js"></script>
    <script src="path/to/swiper.animate-twice.min.js"></script>




<script>        
  var mySwiper = new Swiper ('.swiper-container', {
  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 
  })        
  </script>



  
  

            
   
   

    
    内容1
   
   
        
  
  


4.说明

在每个要动画的类上面添加一个 ani的类名 然后在后面的DATA内 多了两个参数 data-slide-in 进场动画和 data-slide-out出场动画
参数是一致的。

at         500        from  bounceInRight         use     swing       during     500
在   多少时间开始       以      什么动画           使用    什么速度    动画用时    多少  （force 是否使用 只在出场的时候判断）

at        后面跟的是     动画延迟时间
from     后面跟的是    动画样式
use       后面跟的是    动画力度
during   后面跟的是    动画持续时间
force     后面跟的是    是否使用 只有在出场动画的时候使用。进场动画无效。。
出场动画执行时间 =进场等待时间（at）+进场动画执行时间（during）+出场等待时间(at)

查看原文：http://newmiracle.cn/?p=1676