zoukankan      html  css  js  c++  java
  • jQuery效果--show([speed,[easing],[fn]])和hide([speed,[easing],[fn]])

       hide([speed,[easing],[fn]])

    概述

       隐藏显示的元素

       这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西

    参数

       [speed],[easing],[fn]

       speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

       easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

       fn:在动画完成时执行的函数,每个元素执行一次

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
            <script type="text/javascript">
                $(function(){
                    $("button").click(function(){
                        $("p").eq(0).hide();
                        
                        $("p:eq(1)").hide("slow");
                        
                        $("p:eq(2)").hide("slow",function(){
                            $("button").css("color","#FF0000");
                        });
                    });
                });
            </script>
        </head>
        <body>
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <p>第三个段落。</p>
            <button>点击我,隐藏段落</button>
        </body>
    </html>

       show([speed,[easing],[fn]])

    概述

       显示隐藏的匹配元素

       这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效

    参数 

       [speed],[easing],[fn]

       speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

       easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

       fn:在动画完成时执行的函数,每个元素执行一次

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
            <style type="text/css">
                p{
                    display: none;
                }
            </style>
            <script type="text/javascript">
                $(function(){
                    $("button").click(function(){
                        $("p").eq(0).show();
                        
                        $("p:eq(1)").show("slow");
                        
                        $("p:eq(2)").show("slow",function(){
                            $(this).css("color","#FF0000");
                        });
                    });
                });
            </script>
        </head>
        <body>
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <p>第三个段落。</p>
            <button>点击我,显示段落</button>
        </body>
    </html>
  • 相关阅读:
    fastjson把对象转化成json string时避免$ref
    Java 生成UUID
    eclipse创建springboot项目,maven打包时没有将配置文件加入打包文件中处理
    pycharm IDE使用心得
    (16)-Python3之--集合(set)操作
    2021每天一个知识点(一月)
    解决Nginx出现403 forbidden (13: Permission denied)报错的四种方法
    Jmeter函数助手大全
    JMeter去掉启动的cmd命令窗口和制作快捷方式
    Python+Selenium+Unittest实现PO模式web自动化框架(8)
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10082721.html
Copyright © 2011-2022 走看看