懒人之家--可能是JS网页特效代码收集最全的懒站!
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

jQuery卡片式焦点图切换动画特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-03-30
一款适合用于游戏人物介绍的jQuery卡片式焦点图切换动画特效,特别之处在于切换内容可以延迟展示,比如内容中的游戏人物图片就可以在整幅画面切换完成后再淡入显示,也就是说,它支持分步骤加载。


js代码

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src='js/slick.min.js'></script>
<script type="text/javascript">
	(function() {

	  var slideContainer = $('.slide-container');
	  
	  slideContainer.slick();
	  
	  $('.clash-card__image img').hide();
	  $('.slick-active').find('.clash-card img').fadeIn(200);
	  
	  // On before slide change
	  slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
		$('.slick-active').find('.clash-card img').fadeOut(1000);
	  });
	  
	  // On after slide change
	  slideContainer.on('afterChange', function(event, slick, currentSlide) {
		$('.slick-active').find('.clash-card img').fadeIn(200);
	  });
	  
	})();
</script>