<!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. 解决win7系统不支持16位实模式汇编程序DOS执行的问题

    这学期学习了汇编,在自己电脑上发现,win7的dos不支持16位实模式. 对编程来说,不能执行程序是致命的. 在经过网上搜集资料后,得到一种解决的方法--使用dosbox软件执行 dosbox简单说, ...

  2. Python爬虫项目整理

    WechatSogou [1]- 微信公众号爬虫.基于搜狗微信搜索的微信公众号爬虫接口,可以扩展成基于搜狗搜索的爬虫,返回结果是列表,每一项均是公众号具体信息字典. DouBanSpider [2]- ...

  3. 使用JSONlib简单的转换json操作

    在使用jsonlib操作之前 需要引入json及5个依赖包,依赖包版本不能最新,lang与collections有不兼容现象. 官方地址:http://json-lib.sourceforge.net ...

  4. ionic新手教程第三课-在项目中使用requirejs分离controller文件和server文件

    继上篇教程中提到的,我们新建一个简单的tabs类型的Ionic项目. 依据文件夹文件我们知道,系统自己主动创建了一个controller文件和server文件,而且把全部的控制器和服务都写到这两个文件 ...

  5. 在erlang项目中使用protobuf

    在erlang项目中使用protobuf http://blog.csdn.net/mycwq/article/details/21864191 protobuf是google的一个序列化框架,类似X ...

  6. erlang连接mysql

    http://blog.csdn.net/flyinmind/article/details/7740540 项目中用到erlang,同时也用到mysql.惯例,google. 但是,按照网上说的做, ...

  7. 【BZOJ 1037】[ZJOI2008]生日聚会Party

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1037 [题意] [题解] /* 设f[i][j][k][l] 表示前i个人中,有j个男 ...

  8. iOS CALayer使用

    CALayer使用 iOS的设备中,我们之所以能看到各种各样的控件.文字.图片,都是Core Animation框架的功劳.它通过图层的合成,最终显示在屏幕上.而今天这篇文章讲的就是Core Anim ...

  9. 生成动态Lambda表达式1

    SqlDataReader生成动态Lambda表达式 上一扁使用动态lambda表达式来将DataTable转换成实体,比直接用反射快了不少.主要是首行转换的时候动态生成了委托. 后面的转换都是直接调 ...

  10. Java：JSON解析工具-org.json

    一.简介 org.json是Java常用的Json解析工具,主要提供JSONObject和JSONArray类,现在就各个类的使用解释如下. 二.准备 1.在使用org.json之前,我们应该先从该网 ...