<button name="up">折叠隐藏</button>
    <button name="down">折叠显示</button>
    <button name="toggle">折叠切换</button>
    <div></div>
    <script src="./jquery.min.js"></script>
    <script>
        // jQuery的折叠动画
        // 如果有上间距,也会一起运动
        // 隐藏消失
        // $().slideUp( 动画时间 , 动画方式 , 动画结束时回调函数 )
        // 显示出现
        // $().slideDown( 动画时间 , 动画方式 , 动画结束时回调函数 )
        // 切换   显示变隐藏,隐藏变显示
        // $().slideToggle( 动画时间 , 动画方式 , 动画结束时回调函数 )
        $('[name="up"]').click(()=>{
            $('div').slideUp( 2000 , 'linear' , ()=>{
                console.log('动画结束了');
            })
        })
        $('[name="down"]').click(()=>{
            $('div').slideDown( 2000 , 'linear' , ()=>{
                console.log('动画结束了');
            })
        })
        $('[name="toggle"]').click(()=>{
            $('div').slideToggle( 2000 , 'linear' , ()=>{
                console.log('动画结束了');
            })
        })
 
 <button name="up">折叠隐藏</button>
    <button name="down">折叠显示</button>
    <button name="toggle">折叠切换</button>
    <div></div>
    <script src="./jquery.min.js"></script>
    <script>
        // jQuery的折叠动画
        // 如果有上间距,也会一起运动
        // 隐藏消失
        // $().slideUp( 动画时间 , 动画方式 , 动画结束时回调函数 )
        // 显示出现
        // $().slideDown( 动画时间 , 动画方式 , 动画结束时回调函数 )
        // 切换   显示变隐藏,隐藏变显示
        // $().slideToggle( 动画时间 , 动画方式 , 动画结束时回调函数 )
        $('[name="up"]').click(()=>{
            $('div').slideUp( 2000 , 'linear' , ()=>{
                console.log('动画结束了');
            })
        })
        $('[name="down"]').click(()=>{
            $('div').slideDown( 2000 , 'linear' , ()=>{
                console.log('动画结束了');
            })
        })
        $('[name="toggle"]').click(()=>{
            $('div').slideToggle( 2000 , 'linear' , ()=>{
                console.log('动画结束了');
            })
        })

jquery的折叠动画 渐隐渐显动画的更多相关文章

  1. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  2. part10 header界面渐隐渐显 //动态路由//项目动画

    两个组件只同时显示一个 可以用 a v-show='variable'  b: v-show='!variable' 1.对全局事件的解绑 //代码容易出现大量bug 因为影响其他组件 keep-al ...

  3. [Xcode 实际操作]六、媒体与动画-(8)使用CATransaction Reveal制作渐显动画

    目录:[Swift]Xcode实际操作 本文将演示如何制作渐显动画. 图片的不透明度逐渐发生了变化,从而产生作渐显动画的效果. 在项目导航区,打开视图控制器的代码文件[ViewController.s ...

  4. [css3动画]渐隐渐现

    测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  5. 利用 StartLoadingStatus 和 FinishLoadingStatus 读取数据特别是大数据时增加渐隐渐显等待特效 - Ehlib学习(三)

    代码很简单: DBGrideh.StartLoadingStatus(' Loading ... '); Sleep(500); DBGrideh.FinishLoadingStatus; 做下变动: ...

  6. Windows Phone 7 ListBox 列表项渐显加载动画学习笔记

    在wp7程序中,当程序功能越来越复杂时,性能问题是我们不得不考虑的一个问题.在聊天列表中,如果聊天项过多,而且项目UI组件足够复杂时, 我们不得不想尽办法让UI尽快加载.所以有一种可行的方案,就是像Q ...

  7. 利用Trigger完成WPF 的动画-渐显

    其实渐显很简单,就是改变控件的透明度. WPF提供了Trigger这个东西. 下面是动画代码:   1 2 3 4 5 6 7 8 9 10 11 12 13 <Style x:Key=&quo ...

  8. 原生js实现图片网格式渐显、渐隐效果

    写正文前先吐槽一下:端午放假完第一天去某千人以上公司面试前端工程师,第一轮是我应聘职位的部门小领导,谈的不错,面试主要围绕要用到的技术来:第二轮来了我要说的正主,我了个去,问的问题一个和前端无关,问我 ...

  9. 基于JQuery的渐隐渐现轮播

    <div id="ads"> <div> <!--轮播图片--> <ul> <li><a href="# ...

  10. jQuery学习之路(4)- 动画

    ▓▓▓▓▓▓ 大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 ▓▓▓▓▓▓ jQuery中的动画 ▓▓▓▓▓▓ show()和hide()方法 ...

随机推荐

  1. Java面试题:细数ThreadLocal大坑,内存泄露本可避免

    一.背景ThreadLocal是Java中用于解决多线程共享变量导致的线程安全问题的一种机制.它为每个线程分配一个独立的变量副本,从而避免了线程间的数据竞争.这个我们从上一篇文章<Java面试题 ...

  2. 力扣620(MySQL)-有趣的电影(简单)

    题目: 某城市开了一家新的电影院,吸引了很多人过来看电影.该电影院特别注意用户体验,专门有个 LED显示板做电影推荐,上面公布着影评和相关电影描述. 作为该电影院的信息部主管,您需要编写一个 SQL查 ...

  3. 牛客网-SQL专项训练12

    ①SQL中属于分组查询的语句是?(C) 解析: A Where: 条件筛选B 联盟链: 非相关内容C Group By:分组D Having: 条件筛选 区块链大致可以分为公有链(Public Blo ...

  4. 为 Serverless Devs 插上 Terraform 的翅膀,解耦代码和基础设施,实现企业级多环境部署(下)

    简介: 在上篇<为 Serverless Devs 插上 Terraform 的翅膀,实现企业级多环境部署(上)>中,主要介绍了 Serverless Devs 多环境功能的使用,用户读完 ...

  5. ElasticSearch IK 分词器快速上手

    ​简介: ElasticSearch IK 分词器快速上手 一.安装 IK 分词器 1.分配伪终端 我的 ElasticSearch 是使用 Docker 安装的,所以先给容器分配一个伪终端.之后就可 ...

  6. 读取 k8s 存储在 etcd 上的数据

    读取 k8s 存储在 etcd 上的数据 Etcd Assistant 是一款 Etcd 可视化管理工具,便捷高效地操作您的 etcd 集群:支持多种键的视图:管理租约.用户.角色和权限. etcd是 ...

  7. Multisim仿真验证之二极管的特性参数

    二极管的特性 正向 R1 10% 20% 30% 50% 70% 90% Vd/mV 299 543 583 608 627 658 Id/mA 0.01 0.1 0.6 1.4 2.8 7.2 rd ...

  8. 阿里巴巴Canal常见问题:重复解析/Filter失效/消费落后

    前言 Canal是阿里巴巴开源的数据库Binlog日志解析框架,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据订阅和消费. 在之前我写的文章阿里开源MySQL中间件Canal快速入门中, ...

  9. ThreadLocal 的原理讲述 + 基于ThreadLocal实现MVC中的M层的事务控制

    ThreadLocal 的原理讲述 + 基于ThreadLocal实现MVC中的M层的事务控制 目录 ThreadLocal 的原理讲述 + 基于ThreadLocal实现MVC中的M层的事务控制 每 ...

  10. pdo类

    testmysql.php <?php require_once "./mypdo.php"; //do something... //查一行 $id = 3; //$sql ...