谷歌html5特效,谷歌Material Design风格卡片式手风琴特效

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

使用方法

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

HTML结构

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

初始化插件

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

$(function () {

$(".collapse-card").paperCollapse();

});

配置参数

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动作后的回调函数