• 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

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

  • 相关阅读:
    瀑布流布局——JS+绝对定位
    浏览器事件的思考
    css的hack详解
    主流浏览器的Hack写法
    [HTML&CSS] 未知高度多行文本垂直居中
    HTML标签的默认样式列表
    推荐的 CSS 书写顺序
    高效整洁CSS代码原则 (上)
    高效整洁CSS代码原则 (下)
    Xcode升级导致插件失效的解决办法
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14814935.html
Copyright © 2020-2023  润新知