当前位置:JS特效 » 手风琴 » 谷歌Material Design风格卡片式手风琴特效
 谷歌Material Design风格卡片式手风琴特效
如果您觉得内容不错,请分享:

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:66
简要教程

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

使用方法

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



                
                
HTML结构

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

初始化插件

在页面DOM元素加载完毕之后,可以通过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动作后的回调函数

paper-collapse手风琴插件的github地址为:https://github.com/alexander-ruehle/paper-collapse

Top