谷歌Material Design风格卡片式手风琴特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

paper-collapse是一款谷歌Material Design风格卡片式手风琴特效的jQuery插件。该手风琴效果的每一个手风琴项都是一张卡片，点击时卡片会相应的伸展和收缩，时尚美观。

使用方法

使用该手风琴特效需要在页面中引入paper-collapse.css文件，jquery和paper-collapse.js文件。

<link rel="stylesheet" href="css/paper-collapse.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="paper-collapse.js"></script>

HTML结构

下面是该手风琴效果的基本HTML结构如下：

<div class="collapse-card">
  <div class="collapse-card__heading">
    <div class="collapse-card__title">
      <i class="fa fa-question-circle fa-2x fa-fw"></i>
      <!-- 标题文本-->
    </div>
  </div>
  <div class="collapse-card__body">
    <!-- 手风琴卡片中的文本内容 -->
  </div>
</div>

初始化插件

在页面DOM元素加载完毕之后，可以通过paperCollapse()方法来初始化该手风琴插件。

<script>
  $(function () {
    $(".collapse-card").paperCollapse();
  });
</script>

配置参数

paper-collapse手风琴插件的可用的配置参数如下：

参数	类型	默认值	描述
animationDuration	number	400	动画的持续时间，单位毫秒。
easing	string	'swing'	动画的easing效果，可选值有：'swing'或 'linear'
closeHandler	string	'.collapse-card__close_handler'	指定多个用于关闭卡片的class或id选择器
onShow	function	null	动画开始时show动作发生时的回调函数
onHide	function	null	动画开始时hide动作发生时的回调函数
onShowComplete	function	null	完成show动作后的回调函数
onHideComplete	function	null	完成hide动作后的回调函数