<!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. string与QString之间的转换（两种方法：fromStdString直接转换，或者fromLocal8Bit(cstr.c_str())

    string str;QString qstr; //从QString 到 std::stringstr = qstr.toStdString(); //从std::string 到QStringqs ...

  2. TensorFlow中卷积

    CNN中的卷积核及TensorFlow中卷积的各种实现 声明: 1. 我和每一个应该看这篇博文的人一样,都是初学者,都是小菜鸟,我发布博文只是希望加深学习印象并与大家讨论. 2. 我不确定的地方用了“ ...

  3. iOS 通讯录基础

    iOS  6 之后应用訪问通讯录须要获得用户授权,而且仅仅授权一次,即使卸载了之后再安装.也不用再次授权. 开发通讯录应用须要两个框架: 1.ABAddressBook    主要用于提供訪问通讯录中 ...

  4. Indy10 控件的使用（2）TidTCpServer组件学习

    以下来自英文原版帮助文件,文桓英语不好,翻译了老半天.有错误的地方见谅,别骂我. TIdTCPServer = class(TIdComponent) Description TIdTCPServer ...

  5. 学习鸟哥的Linux私房菜笔记（15）——文件系统

    一.文件结构 为了能在设备上存储与读取文件,我们需要在分区上创立文件系统 文件系统记录目录与文件我们称之为文件结构 每一个文件系统在Linux里都被解释成由一个根目录为起点的目录结构 Linux将各个 ...

  6. C 删除字符串1字符串2

    #include<stdio.h> #include<string.h> void main() { char s1[1000],s2[100],b[100]; int i,j ...

  7. Cordova热更新和App升级 - 简书

    原文:Cordova热更新和App升级 - 简书 公司的cordova项目前段时间增加了热更新功能,自己第一次做的时候在网上查找了很多资料,有的资料写的并不全面遇到了很多坑.因此总结一些在开发过程中遇 ...

  8. PDW中的Split Querying Process

    最近看了关于 SQL Server 的分布式处理方面的论文,觉得它提出的 Polybase 跟之前看过的 HadoopDB 有些神似,这里做个小总结(抽空再把 HadoopDB 的总结贴出来). 不算 ...

  9. Websphere设备、企业部署应用程序 【应用】

    Websphere设备.企业部署应用实例 环境 名称 版本号 Linux系统 CentOS-5.6-x86_64 Oracle软件 10201_database_linux_x86_64.cpio W ...

  10. Java设计模式透析之 —— 单例(Singleton)

    写软件的时候经常需要用到打印日志功能,可以帮助你调试和定位问题,项目上线后还可以帮助你分析数据.但是Java原生带有的System.out.println()方法却很少在真正的项目开发中使用,甚至像f ...