文档章节

javascript 实现垂直展开压缩动画

s
 snecker
发布于 2015/02/07 14:26
字数 163
阅读 19
收藏 0
MyAnimate.timer = null;
//默认增量
MyAnimate.inc = 2;
MyAnimate.speed = 10;
//展开
MyAnimate.unfold = function (id, max, inc,speed) {
    inc = inc || this.inc;
    speed = speed || this.speed
    var h = $('#' + id).height()
    if ( h < max ) {
        $('#' + id).height(h + inc)
        clearTimeout(MyAnimate.timer);
        timer = setTimeout('MyAnimate.unfold("' + id + '",' + max + ',' + inc + ','+speed+')', 10)
    }
};
//收缩折叠
MyAnimate.fold = function (id, min, inc,speed) {
    inc = inc || this.inc;
    speed = speed || this.speed
    var h = $('#' + id).height()
    if ( h > min ) {
        $('#' + id).height(h - inc)
        clearTimeout(MyAnimate.timer);
        timer = setTimeout('MyAnimate.fold("' + id + '",' + min + ',' + inc +','+speed+ ')', 10)
    }
};

(function () {
    //点击展开、收缩,展开的id
    $(document).on('click', '[detail-collapse]', function () {
        var state = $(this).attr('detail-collapse');
        if ( state == '0' ) {//收缩,执行展开
            MyAnimate.unfold('prizeStateId', 84)
            $(this).attr('detail-collapse', 1)
            $(this).text('收起明细')
        }

        else {//展开,执行收缩
            MyAnimate.fold('prizeStateId', 0)
            $(this).attr('detail-collapse', 0)
            $(this).text('明细')
        }

    })
})()

© 著作权归作者所有

s
粉丝 1
博文 43
码字总数 10092
作品 0
长沙
技术主管
私信 提问
2018 年 3 月 15 个有意思的 JavaScript 和 CSS 库

Tutorialzine 旨在让你了解最新最酷的 Web 发展趋势。这就是我们每个月为何都会发布一些我们偶然发现并认为值得你关注的优秀资源的原因。 BasicScroll 该库使你可以在你的设计中添加 parall...

oschina
2018/03/16
2.3K
2
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
2018/06/26
0
0
如何使用less实现随机下雪动画详解

冬天来了,设计师说摇摇乐的场景需要随机下落的雪花动画,第一时间就想到的方法是canvas比较好,项目非常紧急,然而小程序对canvas支持不够友好,容易在项目中出现无法预估的兼容性问题 ,马...

前端小攻略
01/21
0
0
Animator.js: 轻松制作你的 CSS 动画

众所周知, CSS 动画采用原生的方法手写很麻烦并且难以管理。而目前流行的 js 动画库大多采用 js 模拟的方式实现动画,效率上难免不如 CSS 原生。于是我写了 Animator.js ,动画完全通过 CS...

pseudo_x
2017/03/12
245
0
为开发者准备的 15 个最棒的 JavaScript 动画库

jQuery给各种效果带来了无限的可能性,他有着简单的、启发性的API,你可以利用它创建你能想到的、甚至你想象不到的效果(有赖于你的创造力和想象力)。 富有创造力的jQuery使用可以为网页设计...

oschina
2014/02/05
15.5K
13

没有更多内容

加载失败,请刷新页面

加载更多

Redux

Redux概念 Redux = Reducer + Flux,数据层框架,将所有数据都存储到store中 Redux的工作流程 Antd的使用 安装npm install antd --save import 'antd/dist/antd.css'import { Input, Butto......

星闪海洋
今天
4
0
OSChina 周一乱弹 —— 你们谁看见了我的诺贝尔奖

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @脚板薯 :这么晚不睡只为找到一首歌,晚安。 ♫Say You Want Me♪ ♫Say You Want Me♪ - Augustana 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
436
17
我为什么要写微信公众号

埋一颗种子,细心呵护,静待她枝繁叶茂,葱郁参天 V2论坛上有个帖子【做程序员最重要的还是一定要有自己的作品】,作者写道: 能有一个作品和你的名字联系在一起,应当成为在职业生涯前期着意...

运维咖啡吧
今天
3
0
数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部