Swiper 中 Animate 动画切换淡入淡出

使用

1、引入

<link rel="stylesheet" href="CSS/animate.min.css">
<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>

2、html

<div class="swiper-container1" id="swiper1">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<div class="black ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
			<img src="./img/banner1.png" alt=""><a href="al/al1.html"></a>
		</div>
	</div> 
</div>

3、js

 var swiper1 = new Swiper ('.swiper-container1', {
     loop: false, 
     autoplay:false,//等同于以下设置
     speed: 1000, //默认就是300毫秒
     on: {
       init: function(){
         swiperAnimateCache(this); //隐藏动画元素 
       }, 
       touchStart: function(){
         that.clearAnimation()
         swiperAnimate(this); 
         $("#swiper1 .black").css({
           animation: 'fadeIn 0.5s linear 0s forwards'
         })
       },
       touchEnd: function(){
          $(".black").css({
            animation: 'fadeOut 0.5s linear 0s forwards'
          })
       },
       // slideChange: function(){
       //   swiperAnimateCache(this); //隐藏动画元素 
       // }
     },
     // autoplay: {
     //   delay: 5000,
     //   stopOnLastSlide: false,
     //   disableOnInteraction: true,
     // },      
     pagination: {
       el: '.swiper-pagination',
     },                       
   })