<!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. [React] Update Component State in React With Ramda Lenses

    In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. ...

  2. Android 5.0中使用JobScheduler

    在这篇文章中,你会学习到在Android 5.0中怎样使用JobScheduler API. JobScheduler API同意开发人员在符合某些条件时创建运行在后台的任务. 介绍 在Android ...

  3. [SQL]远程使用PostgreSQL Studio可视化查看PostgreSQL数据库

    1.下载 前往官网地址下载最新的PostgreSQL Studio,我下载的是 pgstudio_1.2-bin .zip,由于我的电脑里面没有tomcat. 假设电脑里有配置好tomcat,能够下载 ...

  4. NOIP模拟 赌博游戏 - 概率dp

    题意: 最近西雅图的高中校园里流行这样一个游戏. 我们有一个骰子,这个骰子有M个面,分别写着1..M,并且是个公平的骰子,换句话说,一次投掷时每个面朝上的概率是相同的. 游戏的组织者使用这个骰子进行N ...

  5. WPF中自动增加行（动画）的TextBox

    原文:WPF中自动增加行(动画)的TextBox WPF中自动增加行(动画)的TextBox WPF中的Textbox控件是可以自动换行的,只要设置TextWrapping属性为"Wrap& ...

  6. Git远程操作具体解释

    Git是眼下最流行的版本号管理系统,学会Git差点儿成了开发人员的必备技能. Git有非常多优势,当中之中的一个就是远程操作非常简便.本文具体介绍5个Git命令,它们的概念和使用方法,理解了这些内容. ...

  7. [ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法

    一UI前部组件势必更加,我们通常习惯性使用ID获取部件操作的需要.但是,这种方法是extjs推荐么?你有吗extjs利用它来获取组件的推荐方法? 夹 文件夹 extjs的查询组件的API 查询实例 主 ...

  8. Linux下安装mysql(2) 及常见问题解决(CentOS)

    上一篇讲了基本的安装,这篇姑且算作进阶吧 链接Linux下安装mysql(1) 1.准备好mysql的rpm安装包 2.解压并进入usr/local/mysql 3.先执行useradd mysql( ...

  9. Android Studio如何打jar包

    前言 公司经常和客户提供SDK,提供一个jar包sdk是一件很平常的事.Eclipse 有图形界面和向导供开发者将一个项目导出为jar包,相对来讲是比较简单的,切换到Android Studio后,则 ...

  10. 【25.23%】【codeforces 731C】Socks

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...