<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. js中this对象的理解

    一.定义 函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别 在绝大多数情况下,函数的调用方式决定了 this 的值(运行时绑定) th ...

  2. 【Oracle笔记】递归以及索引的一丢丢使用

    [笔记]递归以及索引的一丢丢使用 递归写法,树查询 connect by nocycle prior START WITH XXX CONNECT BY PRIOR XXX ORDER BY XXX ...

  3. 力扣693(java)-交替位二进制数(简单)

    题目: 给定一个正整数,检查它的二进制表示是否总是 0.1 交替出现:换句话说,就是二进制表示中相邻两位的数字永不相同. 示例 1: 输入:n = 5输出:true解释:5 的二进制表示是:101示例 ...

  4. 基于MaxCompute+PAI的用户增长方案实践

    ​简介: 如何通过PAI+MaxCompute完成用户增长模型AARRR全链路,包含拉新.促活.留存.创收.分享. 本文作者 李博 阿里云智能 高级产品专家 在过去一年阿里云PAI机器学习团队做了很多 ...

  5. 11.Node节点维护

    题目:Node节点维护 配置环境kubectl config use-context ek8s 将名为ek8s-node-0的node节点设置为不可用,并重新调度该node上所有运行的pods. 官方 ...

  6. Python多线程编程深度探索:从入门到实战

    title: Python多线程编程深度探索:从入门到实战 date: 2024/4/28 18:57:17 updated: 2024/4/28 18:57:17 categories: 后端开发 ...

  7. join分析:shuffle hash join、broadcast hash join

    Join 背景介绍 Join 是数据库查询永远绕不开的话题,传统查询 SQL 技术总体可以分为简单操作(过滤操作.排序操作 等),聚合操作-groupby 以及 Join 操作等.其中 Join 操作 ...

  8. leaflet实现地图遮罩

    实现地图遮罩效果(主要显示目标区域内部,外部用暗色填充): 地图遮罩实现思路:外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的polygon,然后给这个polyon一个透明度为0.4的黑色即可 ...

  9. IDEA 2020 版配置VUE

    找到IDE工具栏,就是启动项目的run那里 点击下拉框,找到Eidt Confiuration,选择 选择小加号 选取npm 设置npm页,完成后,点击apply run npm ,如图选择run或者 ...

  10. vite.config.js 无法使用__dirname的解决方法

    __dirname 是commonjs规范的内置变量.如果使用了esm 是不会自动注入这个变量的. 在commonjs中,注入了__dirname,__filename, module, export ...