首页 > Web开发 > 详细

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

时间:2021-05-26 21:36:23      阅读:17      评论:0      收藏:0      [点我收藏+]

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

技术分享图片

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

原文:https://www.cnblogs.com/bi-hu/p/14814935.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!