<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $('#btnShow').click(function () {
                $('div').show(500);
            })
            $('#btnHide').click(function () {
                $('div').hide(500);
            })
            $('#btnSlideDown').click(function () {
                $('div').slideDown(500);
            })
            $('#btnSlideUp').click(function () {
                $('div').slideUp(500);
            })
            $('#btnSlideToggle').click(function () {
                $('div').slideToggle(1000);
            })
            $('#btnFadeIn').click(function () {
                $('div').fadeIn(500);
            })
            $('#btnFadeOut').click(function () {
                $('div').fadeOut(500);
            })
            $('#btnFadeToggle').click(function () {
                $('div').fadeToggle(1000);
            })
        })
    </script>
</head>
<body>
    <input type="button" name="name" value="Show" id="btnShow" />
    <input type="button" name="name" value="Hide" id="btnHide"/>
    <input type="button" name="name" value="SlideDown" id="btnSlideDown"/>
    <input type="button" name="name" value="SlideUp" id="btnSlideUp"/>
    <input type="button" name="name" value="SlideToggle" id="btnSlideToggle"/>
    <input type="button" name="name" value="FadeIn" id="btnFadeIn"/>
    <input type="button" name="name" value="FadeOut" id="btnFadeOut"/>
    <input type="button" name="name" value="FadeToggle" id="btnFadeToggle"/>
    <div style="width:300px;height:200px;background-color:blue"></div>
</body>
</html>

jquery 显示和隐藏的三种方式的更多相关文章

  1. MATLAB 显示输出数据的三种方式

    MATLAB 显示输出数据的三种方式 ,转载 https://blog.csdn.net/qq_35318838/article/details/78780412 1.改变数据格式 当数据重复再命令行 ...

  2. jquery调用click事件的三种方式

    第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello Wor ...

  3. Jquery显示和隐藏的4种简单方法

    Html代码:  <div class="topicList">  <h3><span>学习天地</span></h3> ...

  4. Windows10-UWP中设备序列显示不同XAML的三种方式[3]

    阅读目录: 概述 DeviceFamily-Type文件夹 DeviceFamily-Type扩展 InitializeComponent重载 结论 概述 Windows10-UWP(Universa ...

  5. jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque

    问题: XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present ...

  6. 取消选中单选框radio的三种方式

    作者: 铁锚 日期: 2013年12月21日 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DO ...

  7. JavaScript声明全局变量三种方式的异同

    JavaScript中声明变量很简单var(关键字)+变量名(标识符). 方式1 1 2 var test; var test = 5; 需注意的是该句不能包含在function内,否则是局部变量.这 ...

  8. jquery.validate+jquery.form提交的三种方式

    原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...

  9. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得，放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

随机推荐

  1. windll对象

    回过头来,再看一下windll和oledll的差别,这两者之间最大的差别是oledll调用的函数都是固定返回HRESULT类型的值,而windll是不固定的类型的.在Python 3.3版本号之前,都 ...

  2. c#List泛型数据扩展，把List&lt;&gt;型数据格式化成List&lt;SelectListItem&gt;，用来作dropdownlist的数据

    代码例如以下 public static List<SelectListItem> CreateSelect<T>(this IList<T> t, string ...

  3. 【u011】乘法难题

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 乘法难题是一种用一行的卡片来玩的单人游戏,每张卡片上有一个正整数.在游戏者从中拿出一卡片,并且得到一个 ...

  4. 全栈JavaScript之路（ 二十五 ）訪问元素的样式

    不论什么支持style 特性的元素在 ,在其DOM  节点 对象中都有一个 style 属性与之相应. 这个style 对象是 CSSStyleDeclaration类型的实例,包括着html sty ...

  5. 网络编程02---HTTP协议

    1.URL简单介绍 1.client怎样找到server 我们都知道网络中部署着各种各样的server.比方腾讯的server.百度的server.那么问题来了.client怎样找到想要连接的serv ...

  6. 静态编译ltrace

    ltrace可以跟踪进程的库函数调用,它会显现出哪个库函数被调用,而strace则是跟踪程序的每一个系统调用. 有时候只使用strace还是不够的,须要ltrace配合才干找出问题出在哪里. 假设在b ...

  7. js进阶 9-10 html中如何遍历下拉列表

    js进阶 9-10  html中单选框和多选框如何遍历下拉列表 一.总结 一句话总结: 1.select元素的options.length可以获取选择长度,然后用options[i]精确定位到选项,用 ...

  8. PPT之SmartArt功能

    在PPT中,我们经常看到这样的漂亮的组合图标: 他们是怎么做出来的呢?其实用ppt自带的SmartArt功能就能做出来了. Tips:SmartArt可以直接先选择组合图标再填文字,还可以写好了文字, ...

  9. 任务调度平台Cuckoo-Schedule

    任务调度平台Cuckoo-Schedule 1         概述 1.1      平台概述 Cuckoo-Schedule是基于Quartz-Schedule的轻量级任务调度框架,具有易学习.易 ...

  10. [译]async/await中使用阻塞式代码导致死锁

    原文:[译]async/await中使用阻塞式代码导致死锁 这篇博文主要是讲解在async/await中使用阻塞式代码导致死锁的问题,以及如何避免出现这种死锁.内容主要是从作者Stephen Clea ...