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>

jQuery效果--show([speed,[easing],[fn]])和hide([speed,[easing],[fn]])的更多相关文章

  1. jQuery效果------隐藏hide()/显示show()

    hide()和show() hide():隐藏文本. show():显示文本. 语法: $(selector).hide(speed,callback); $(selector).show(speed ...

  2. jquery 效果

    效果1.基本效果    1.1 show([speed,[easing],[fn]]) 如果元素本身是可见的,则不对其作任何改变.如果元素是隐藏的,则使其可见.        $("p&qu ...

  3. 【Python全栈-JavaScript】jQuery效果

    jQuery效果 jQuery 效果函数: 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...

  4. jquery 效果笔记

    jquery效果 显示隐藏     show()     语法     show([speed,[easing],[fn]])     参数可以省略,无动画直接使用     hide()     to ...

  5. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

  6. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  7. jQuery 效果 - animate() 方法

    http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...

  8. <五> jQuery 效果

    显示隐藏 $("selector").show(speed, callback) $("selector").hide"(speed, callbac ...

  9. Jquery效果代码--（二）

    //jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...

随机推荐

  1. python全栈开发day10

    day10知识点总结 while循环补充: continue,终止当前循环,开始下一次循环 break,终止所有循环 pycharm 技巧1.setting 中搜索 mouse 设置鼠标滚轮 改变字体 ...

  2. 敏捷开发之Scrum扫盲篇（转）

    现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP... 为了不落后于他人,我也开始学习Scrum.今天主要是对我最近阅读的相关资料,根据自己的理解,用自己的语言来描述Scrum中 ...

  3. Python 字符串常用方法总结

    明确:对字符串的操作方法都不会改变原来字符串的值 1,去掉空格和特殊符号 name.strip()  去掉空格和换行符 name.strip('xx')  去掉某个字符串 name.lstrip()  ...

  4. IE报错：[vuex] vuex requires a Promise polyfill in this browser.

    使用的是vue2.0版本 IE报错提醒: 导致原因:使用了 ES6 中用来传递异步消息的的Promise,而IE的浏览器不支持 解决办法: 1.安装babel-polyfill模块,babel-plo ...

  5. ActiveMQ整合spring、同步索引库

    1.   Activemq整合spring 1.1. 使用方法 第一步:引用相关的jar包. <dependency> <groupId>org.springframework ...

  6. Advising controllers with the @ControllerAdvice annotation

    The @ControllerAdvice annotation is a component annotation allowing implementation classes to be aut ...

  7. 帝国cms修改栏目后文章列表的url错误怎么解决

    修改了某个栏目的目录地址,原本是/abc/,现在改成了/ab/,重新生成了栏目页面/ab/和文章页面/ab/*.html,但是栏目页的列表文章url还是/abc/*.html(正确的url应该是/ab ...

  8. coocs2d-html5在使用cocoseditor时调用设备的accelerometer来使用重力感应

    在使用大牛touchsnow开发的插件cocoseditor开发游戏时遇到了一些问题,然后就试着解决.近期想试下coocs2d-html5是否能使用重力感应,发现是能够的.只是这个仅仅能在移动真机上測 ...

  9. ASP.NET学习笔记(1)

    1.ASP.Net简介 A.ASP.Net动态网页技术.在服务器端运行.Net代码,动态生成HTML.在浏览器可以使用JavaScript.Dom完成前台工作.如存储数据.访问数据库.业务逻辑运算等可 ...

  10. 华为核心交换机绑定IP+MAC+端口案例

    1         案例背景 某网络改造项目,核心交换机为华为S5700,接入交换机为不同型号交换机,如下模拟拓扑,客户端接入交换机1通过Access模式与核心交换机连接,该交换机下只有一个Vlan2 ...