<!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. Android 长按事件和短按事件同时响应

    在长按事件中的return false 改为return true就可以解决这个问题

  2. scss 常用语法

    点击查看 sass 官方文档 1.编译 初学可以在atom 中编译 安装命令 gem install sass atom中安装atom-sass ,mac 中"control+option+ ...

  3. 数据结构与算法——常用数据结构及其Java实现

    前言 仿佛一下子,2017年就快过去一半了,研一马上就要成为过去式了,我打算抓住研一的尾巴,好好梳理一下数据结构与算法,毕竟这些基础知识是很重要的嘛.所以准备在这里搞一个系列的文章,以期透彻. 本系列 ...

  4. Erlang中频繁发送远程消息要注意的问题

    http://avindev.iteye.com/blog/76373 注:这篇文章可能会有争议,欢迎提出意见 在Erlang中,如果要实现两个远程节点之间的通信,就需要通过网络来实现,对于消息发送, ...

  5. Mac下新安装的MySQL无法登陆root用户（安装时没有设置密码）

    1.也不知是何原因,新安装好的MySQL,如果尝试用mysql -u root -p登陆就会出现这样的错误,但是root用户根本就没有设置密码. $ cd /usr/local$ cd mysql $ ...

  6. 无法写入预编译头文件,由于 IO 设备错误，无法运行此项请求的错误的解决

    作者:朱金灿 来源:http://blog.csdn.net/clever101 早上查看服务器每日构建的情况,发现出现一个诡异的错误: fatal error C1085: 无法写入预编译头文件:& ...

  7. 语言的学习 —— 西班牙语（español）

    联合国六大官方语言:英语.法语.俄语.汉语.西班牙语.阿拉伯语: 在七大洲中,主要是在拉丁美洲国家中(巴西.伯利兹.法属圭亚那.海地等地除外).很多说西班牙语的人把他们的语言称为西班牙语(españo ...

  8. Android四个基本组件（2）之Service 服务与Content Provider内容提供商

    一.Service 维修: 一Service 这是一个长期的生命周期,没有真正的用户界面程序,它可以被用于开发如监视类别节目. 表中播放歌曲的媒体播放器.在一个媒体播放器的应用中.应该会有多个acti ...

  9. git安装使用详解

    Git是分布式版本控制系统,那么它就没有中央服务器的,每个人的电脑就是一个完整的版本库,这样,工作的时候就不 需要联网了,因为版本都是在自己的电脑上.既然每个人的电脑都有一个完整的版本库,那多个人如何 ...

  10. BS_OWNERDRAW风格的作用和例子（值得研究，待续）

    TBitBtn就是一个例子: procedure TBitBtn.CreateParams(var Params: TCreateParams); begin inherited CreatePara ...