zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Spring发展历程总结
    杂说
    说说Java生态圈的那些事儿
    你知道什么是Grunt么?
    jquery常见知识点 总结
    优化JavaScripe 提升首页加载速度的几种方案解析
    final static 深度解析
    JS的预编译和执行顺序 详析(及全局与局部变量)
    swipe.js 2.0 轻量级框架实现mobile web 左右滑动
    JS中跨域和沙箱的解析
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14814935.html
Copyright © 2011-2022 走看看