16. jQuery 的综合动画和 jQuery 的停止动画

2021-05-27 16:04:09 阅读：151 来源： 互联网

标签：jQuery 动画 16 stop 100px div 运动 animate

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({
            width:300,
            height:'300px',
            left:'100px',
            top:'100px',
            borderRadius:'50%',
            color:'#2600ff'         //没用的啊！  颜色 和 Css 2D 、 3D 在这里都不起作用
        },2000,'linear',()=>{
            console.log("已执行动画！");
        })
    });
</script>
</body>
</html>

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({
            width: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>

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

标签：jQuery,动画,16,stop,100px,div,运动,animate
来源： https://www.cnblogs.com/bi-hu/p/14818211.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

16. jQuery 的综合动画 和 jQuery 的停止动画

jQuery 的综合动画

jQuery 的停止动画

16. jQuery 的综合动画和 jQuery 的停止动画