zoukankan      html  css  js  c++  java
  • 208 jQuery 效果 之 显示隐藏

    jQuery 给我们封装了很多动画效果,最为常见的如下:

    • 显示隐藏:show() / hide() / toggle() ;
    • 划入画出:slideDown() / slideUp() / slideToggle() ;
    • 淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
    • 自定义动画:animate() ;

    注意:

    动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

    jQuery为我们提供另一个方法,可以停止动画排队:stop() ;

    1.5.1 显示隐藏

    ​ 显示隐藏动画,常见有三个方法:show() / hide() / toggle() ;

    ​ 语法规范如下:

    代码演示

    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <div></div>
        <script>
            $(function() {
                $("button").eq(0).click(function() {
                    $("div").show(1000, function() {
                        alert(1);
                    });
                })
                $("button").eq(1).click(function() {
                    $("div").hide(1000, function() {
                        alert(1);
                    });
                })
                $("button").eq(2).click(function() {
                  $("div").toggle(1000);
                })
                // 一般情况下,我们都不加参数直接显示隐藏就可以了
            });
        </script>
    </body>
    

  • 相关阅读:
    React-Hooks
    RC-Select 学习笔记
    React Strict Mode
    CSSMotion VS animation in Angular
    jquery中has方法
    jquery中对于extend方法的使用
    一篇对于在jquery中使用jsonp技术介绍
    对于table元素的总结
    css3布局相关样式
    移动端去掉按钮点击热区
  • 原文地址:https://www.cnblogs.com/jianjie/p/12203120.html
Copyright © 2011-2022 走看看