<button name="width">改变宽</button>
    <button name="height">改变高</button>
    <button name="all">改变宽高</button>
    <div></div>
    <script src="./jquery.min.js"></script>
    <script>
        // 之前的动画效果,都是隐藏和出现的效果
        // 可以通过自定义动画,定义需要改变的属性和属性值,到达动画效果
        // 语法:
        // $().animate( {动画属性和属性值} , 动画时间 , 动画方式 , 动画结束回调函数 )
        // 有一些属性,动画效果是不支持的
        // 颜色 和 display
        // 颜色可以使用过渡来实现
        // display 可以先用透明度,逐渐消失,当运动结束时,直接设定属性为 none 或者 block
        $('[name="width"]').click(()=>{
            $('div').animate({width:500} , 2000 , 'linear' , ()=>{
                console.log('动画结束了')
            })
        }) 
        $('[name="height"]').click(()=>{
            $('div').animate({height:500} , 2000 , 'linear' , ()=>{
                console.log('动画结束了')
            })
        }) 
        $('[name="all"]').click(()=>{
            $('div').animate({height:'500px',width:500, opacity: 0} , 2000 , 'linear' , ()=>{
                console.log('动画结束了');
                // 当动画结束,设定样式为 none
                $('div').css({display:'none'});
            })
        }) 
 
 <button name="toggle">折叠切换</button>
    <div></div>
    <script src="./jquery.min.js"></script>
    <script>
        // jQuery的动画,如果点击过快,不会造成动画执行混乱
        // 会逐一将所有点击触发的动画,完全都执行完毕
        // 执行完上一个动画,再执行下一个动画,直到所有动画都执行完毕
        // stop()   立即终止上一个动画的执行,从当前运动位置,开始下一次动画
        // finish() 立即终止上一个动画的执行,从上一个运动终止位置,开始下一次动画
        $('[name="toggle"]').click(()=>{
            // 上一次动画没有执行结束,就触发了下一次动画
            // 会立即终止上次动画的执行,从当前位置开始,执行下一次动画
            // $('div').stop().slideToggle( 2000 , 'linear' , ()=>{
            //     console.log('动画结束了');
            // })
            // 上一次动画没有执行结束,就触发了下一次动画
            // 会立即终止上次动画的执行,从上一次动画应有的结束位置开始,执行下一次动画
            $('div').finish().slideToggle( 2000 , 'linear' , ()=>{
                console.log('动画结束了');
            })
        })
        // 总结: 触发下一次动画,上一次没有执行完的动画,怎么处理
        // 1, finish   stop  都要写在 运动函数之前
        //    表示终止的是 之后的 动画的响应的执行
        // 2, finish   stop  终止的是上一次动画的执行
        // 3, finish  上一次动画的终止位置开始,执行下一次动画
        //    stop    从当前位置开始,执行下一次动画 

自定义动画 jquery的结束动画的更多相关文章

  1. 自定义jQuery的animate动画

    //擦除效果 jQuery.extend(jQuery.easing, { easeOutBack : function(x, t, b, c, d, s) { s = s || 1.3; retur ...

  2. bootstrap课程7 jquery中结束之前动画用什么

    bootstrap课程7 jquery中结束之前动画用什么 一.总结 一句话总结:stop()方法.$('.navs').not($('.navs').eq(idx)).stop().hide(100 ...

  3. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  4. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  5. jQuery的效果(动画)

    jquery的效果(动画) show 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数:speed:三种预定速度之一的字符串('slow','normal','fast' ...

  6. 【学习笔记】jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

  7. jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

  8. jQuery中的动画——《锋利的JQuery》

    自CSS3以来,主流网站开始偏向于扁平风格和动画效果,这时就可以jQuery的动画就可以发挥其长处了,灵活的应用其动画API,让我们可以设计出很多绚丽的效果.下面,让我们来列举一些jQuery常用的动 ...

  9. 4.2 《锋利的jQuery》jQuery中的动画

    问题:queue()方法? tip0: jquery从1.9版本以上就不支持toggle()方法. // $("#panel h5.head").toggle(function() ...

  10. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. 力扣326(java)-3的幂(简单)

    题目: 给定一个整数,写一个函数来判断它是否是 3 的幂次方.如果是,返回 true :否则,返回 false . 整数 n 是 3 的幂次方需满足:存在整数 x 使得 n == 3x 示例 1: 输 ...

  2. 力扣231(java)-2的幂(简单)

    题目: 给你一个整数 n,请你判断该整数是否是 2 的幂次方.如果是,返回 true :否则,返回 false . 如果存在一个整数 x 使得 n == 2x ,则认为 n 是 2 的幂次方. 示例 ...

  3. 快手基于 Flink 的持续优化与实践

    简介: 快手基于 Flink 的持续优化与实践的介绍. 一.Flink 稳定性持续优化 第一部分是 Flink 稳定性的持续优化.该部分包括两个方面,第一个方面,主要介绍快手在 Flink Kafka ...

  4. 从操作系统层面分析Java IO演进之路

    简介: 本文从操作系统实际调用角度(以CentOS Linux release 7.5操作系统为示例),力求追根溯源看IO的每一步操作到底发生了什么. 作者 | 道坚来源 | 阿里技术公众号 前言 本 ...

  5. 庖丁解牛-图解MySQL 8.0优化器查询转换篇

    ​简介: 在<庖丁解牛-图解MySQL 8.0优化器查询解析篇>一文中我们重点介绍了MySQL最新版本8.0.25关于SQL基本元素表.列.函数.聚合.分组.排序等元素的解析.设置和转换过 ...

  6. [Contract] ETH 与 Gas 之间的价格转换关系, Ethereum Gas Price Chart

    以太坊网络每天的平均气价(Gas)是变化,有一张价格表:https://etherscan.io/chart/gasprice 然后你可以知道 1 Gas = xx Gwei,再换算一下 1 ETH ...

  7. 4.prometheus监控--监控linux服务器

    一.监控linux服务器 1.1 二进制安装 # 客户端操作wget https://github.com/prometheus/node_exporter/releases/download/v1. ...

  8. CF1800F Dasha and Nightmares

    F.Dasha and Nightmares 题意:\(n\) 个字符串 \(s_i\),问有多少对不同的 \((i, j) \ (1 \le i \le j \le n)\),使得 \(s_i\) ...

  9. 八、Doris外部表及数据导入

    DorisDB提供了多种导入方式,用户可以根据数据量大小.导入频率等要求选择最适合自己业务需求的导入方式. 数据导入:  1.离线数据导入:如果数据源是Hive/HDFS,推荐采用 Broker Lo ...

  10. protobuf 文档

    文档地址: https://golang-tech-stack.com/tutorial/pb 学习视频: https://www.bilibili.com/video/BV1Y3411j7EM?p= ...