zoukankan      html  css  js  c++  java
  • 16. jQuery 的综合动画 和 jQuery 的停止动画

    jQuery 的综合动画

    + 可以按照你的设定去进行运动

    1. animate()
    => 语法: animate({}, 时间, 运动曲线, 回调函数)
    => {}: 书写你要运动的属性 (普通Css属性)
    => 注意:
    -> 颜色相关的属性, 运动不了
    -> CSS3 的 2d 和 3d 动画效果运动不了

    例: 注意 书写 {} 运动的属性时 带单位的话记得加上 单引号  ' '   

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="jqsourse.js"></script>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
            }
        </style>
    </head>
    <body>
    <button class="animate">点击运动</button>
    <div></div>
    
    
    <script>
        $(".animate").click(()=>{
    
            $("div").animate({
                300,
                height:'300px',
                left:'100px',
                top:'100px',
                borderRadius:'50%',
                color:'#2600ff'         //没用的啊!  颜色 和 Css 2D 、 3D 在这里都不起作用
            },2000,'linear',()=>{
                console.log("已执行动画!");
            })
        });
    </script>
    </body>
    </html>

    因为JQ是链式编程 所以会可以叠加动画 , 记住要配合 display 来操作。

    jQuery 的停止动画

    + 因为当你给一个元素设置动画以后
    + 如果快速触发, 会停不下来, 直到你所有的触发都执行完毕为止
    + jquery 给我们提供两个临时停下动画的方法

    1. stop()


    + 语法: 元素集合.stop()


    + 当代码执行到这句的时候, 不管运动到什么程度, 立刻停下来 即立即停止那种:

    + 运动到什么位置就停止在什么位置

    2. finish()
    + 语法: 元素集合.finish()


    + 当代码执行到这句的时候, 不管运动到什么程度, 直接去到运动结束位置

    + 直接完成本次动画

    例:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="jqsourse.js"></script>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
            }
        </style>
    </head>
    <body>
    <button class="animate">点击运动</button>
    <button class="stop">点击暂停</button>
    <button class="finish">直接结束</button>
    <div></div>
    
    
    <script>
        $(".animate").click(()=>{
            $("div").animate({
                300,
                height:'300px',
                left:'100px',
                top:'100px',
                borderRadius:'50%',
                color:'#2600ff'         //没用的啊!  颜色 和 Css 2D 、 3D 在这里都不起作用
            },2000,'linear',()=>{
                console.log("已执行动画!");
            })
        });
    
    
        /***-------------------------------------------*/
        $(".stop").click(()=>{
            $("div").stop();
            });
    
        /***-------------------------------------------*/
    
        $(".finish").click(()=>{
            $("div").finish()
        });
    
    </script>
    </body>
    </html>

    注意: 你点击暂停 再继续点击 开始 他会继续做动画  ,而不是重新来一遍.

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14818211.html

  • 相关阅读:
    广义斐波那契数列 矩阵乘法
    GCD
    [SDOI2008]沙拉公主的困惑 线性筛_欧拉函数_逆元_快速幂
    [SDOI2008]仪仗队 欧拉函数
    洛谷P2617 Dynamic Rankings 主席树 单点修改 区间查询第 K 大
    洛谷P3919 【模板】可持久化数组(可持久化线段树/平衡树)
    Codevs 3269 混合背包
    洛谷P3834 【模板】可持久化线段树 1 主席树
    矩形面积求并 扫描线 + 过不去
    灾后重建 Floyd
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14818211.html
Copyright © 2011-2022 走看看