13. jQuery 里面有三个基础动画

jQuery 里面有三个基础动画

1. show()
+ 显示
2. hide()
+ 隐藏
3. toggle()
+ 切换, 本身显示就隐藏, 本身隐藏就显示(取反的意思啊)

 

上面三个方法操作的都是 ： display: none 和 block

而且 上面三个方法的语法都是一样的：

=> 方法名(运动时间, 运动曲线, 回调函数)

参数：
=> 运动时间: 多长时间运动结束（毫秒）
=> 运动曲线: 什么方式运动　　
=> 回调函数: 运动结束后触发此方法

例： 自己试一下啊 很简单的

<!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: 200px;
            height: 200px;
            background-color: red;
            margin-top: 10px;
        }
        input{
            margin-top: 10px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<input class="show" type="button" value="显示">
<input class="hide" type="button" value="隐藏">
<input class="toggle" type="button" value="切换">
<div></div>

<script>

    $('.show').click(()=>{
        $('div').show(1000,'linear',()=>{
            console.log("显示div");
        })
    });

    $('.hide').click(()=>{
        $('div').hide(1000,'linear',()=>{
            console.log("隐藏div");
        })
    });

    $('.toggle').click(()=>{
        $('div').toggle(1000,'linear',()=>{
            console.log("切换div");
        })
    });

</script>
</body>
</html>

 css的运动 我偷得 啊哈哈

1、ease：（逐渐变慢）默认值


2、linear：（匀速）

3、ease-in：(加速)

4、ease-out：（减速）

5、ease-in-out：（加速然后减速）

6、cubic-bezier

posted @ 2021-05-26 20:31  咸瑜  阅读(108)  评论(0)  编辑  收藏  举报