<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>效果</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

    <style type="text/css">

    	body{

    		font-family: "Microsoft YaHei";

    		text-align: center;

    	}

    	#mainDiv {

    		width: 100%;

    		text-align: center;

    		margin-top:10px;

    	}

    	.div1 {

    		width:320px;

    		height:120px;

    		color: white;

    		background-color: #0092E7;

    		margin-left: auto;

    		margin-right: auto;

    	}

    	.div2 {

    		width:320px;

    		height:120px;

    		margin-top:10px;

    		margin-left: auto;

    		margin-right: auto;

    	}

    	.div2_1 {

    		width:155px;

    		height:100%;

    		color: white;

    		float: left;

    		text-align: center;

    	}

    	.cGreen{background-color: #4CA902}

    	.cPink{background-color: #ED4A9F}

    	.cBlue{background-color: #0092E7}

    	.cCyan{background-color: #01A6A2}

    	.cYellow{background-color: #DCA112}

    	.cRed{background-color: #B7103B}

    	.cPurple{background-color: #792F7C}

    	.cBlack{background-color: #110F10}

    	.cOrange{background-color: #FF4500}

    	.cGray{background-color: #A9A9A9}

    	.hide{display: none;}

    </style>

    <script type="text/javascript">

    	$(document).ready(function(){

    		$("#btn1").click(function(){

    			$(".div1").hide();

    		});

    		$("#btn2").click(function(){

    			$(".div1").show();

    		});

    		$("#btn3").click(function(){

    			$(".cPink").slideUp("slow");

    		});

    		$("#btn4").click(function(){

    			$(".cPink").slideDown(600);

    		});

    		$("#btn5").click(function(){

    			$(".cPink").slideToggle("slow");

    		});

    		$("#btn6").click(function(){

    			$(".cGreen").fadeOut("slow");

    		});

    		$("#btn7").click(function(){

    			$(".cGreen").fadeIn(600);

    		});

    		$("#btn8").click(function(){

    			$(".cGreen").fadeToggle("slow");

    		});

    		$("#btn9").click(function(){

    			$(".div1").fadeTo("slow", 0.4);

    		});

    		$("#btn10").click(function(){

    			$(".div2_1").animate({

    				   width: 'toggle', opacity: 'toggle'

    				 }, "slow");

    		});

    	});

    </script>

  </head>

  <body>

    <div id="mainDiv">

    	<div class="div1">①</div>

    	<div class="div2">

    		<div class="div2_1 cPink" style="margin-right:5px;">②</div>

    		<div class="div2_1 cGreen" style="margin-left:5px;">③</div>

    	</div>

   	</div>

    <p style="clear:both;"></p>

    <br>

    <hr>

    <input type="button" id="btn1" value="hide()隐藏蓝色区域块">

    <input type="button" id="btn2" value="show()隐藏蓝色区域块">

    <input type="button" id="btn3" value="slideUp()通过高度变化（向上减小）来动态地隐藏粉色区域块">

    <input type="button" id="btn4" value="slideDown()通过高度变化（向下增大）来动态地显示粉色区域块">

    <input type="button" id="btn5" value="slideToggle()通过高度变化来切换粉色区域块的可见性">

    <input type="button" id="btn6" value="fadeOut()通过不透明度的变化来实现淡出绿色块">

    <input type="button" id="btn7" value="fadeIn()通过不透明度的变化来实现淡入绿色块">

    <input type="button" id="btn8" value="fadeToggle()通过不透明度的变化淡入和淡出绿色块">

    <input type="button" id="btn9" value="fadeTo()通过不透明度以渐进方式调整蓝色块到指定的不透明度（0.4）">

    <input type="button" id="btn10" value="animate()通过制定自定义动画操作粉、绿色块">

  </body>

</html>

jQuery中的效果（九）：hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()、fadeTo()、animate等的更多相关文章

  1. jQuery中的效果函数方法整理

    注:以下所有的speed 参数可选,规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 以下所有的callback 参数可选,是效果完成后所执 ...

  2. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  3. 前端基础-jQuery的动画效果

    阅读目录 隐藏 显示 切换 下拉 上卷 显示 一.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...

  4. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  5. 4.2 《锋利的jQuery》jQuery中的动画

    问题:queue()方法? tip0: jquery从1.9版本以上就不支持toggle()方法. // $("#panel h5.head").toggle(function() ...

  6. jQuery中事件与动画

    jQuery中的事件与动画   一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...

  7. jQuery中的事件与动画 笔记整理

    一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件的绑定和处 ...

  8. 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画

    jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...

  9. jQuery 中的简单动画

    制作动画常用方法: show("速度")   显示元素   hide("速度")   隐藏元素   toggle()       切换效果 例如下jQuery代 ...

随机推荐

  1. sublime安装emmet

    1,先安装package install 2,然后安装emmet,安装完后会自动load加载Pyv8,如果加载不成功只能手动下载(详情可以百度).

  2. C标准库学习

    前言 C标准库源码可通过下列两个网站进行查看:The GNU C Library.Welcome to uClibc-ng! - Embedded C library 以下学习记录也是以这两个网站提供 ...

  3. Python (paramiko) 连接Linux服务器

    目录 参考资料 Paramiko 安装 连接Linux 文件上传/下载 文件封装 其他 参考资料 https://www.liujiangblog.com/blog/15/ https://blog. ...

  4. P7003 [NEERC2013]Hack Protection

    P7003 [NEERC2013]Hack Protection 题意 给定一个序列 \(a\) ,求有多少个区间满足区间内的数的异或和等于与的和的值. 思路 首先我们求一个异或前缀和 \(s\),对 ...

  5. 第八篇--编写Windows服务

    编写service服务参考网址:https://blog.csdn.net/nodeathphoenix/article/details/24181509 vc获得显示器状态(捕获息屏.亮屏网址):h ...

  6. odoo ORM中的filed的关系映射的使用详解1

    前言 前面我们详细讲解了odoo ORM中fields中的常见属性的使用,根据不同的属性可以对字段进行不同的限制操作,比如readonly只读,store是否存储到数据库.今天我们继续研究ORM中的关 ...

  7. xmind2020 zen 10.2.1win/mac/linux安装教程

    xmind是一款优秀的思维导图软件,本文教大家如何安装xmind zen 2020 10.2.1版本,解锁使用全部功能,包括去掉xmind zen水印.上传图片等功能,支持windows/mac/li ...

  8. Hadoop 3.1.1 - Yarn - 使用 GPU

    在 Yarn 上使用 GPU 前提 目前,Yarn 只支持 Nvidia GPU. YARN NodeManager 所在机器必须预先安装了 Nvidia 驱动器. 如果使用 Docker 作为容器的 ...

  9. Dapr 客户端 搭配 WebApiClientCore 玩耍服务调用

    使用Dapr 客户端 处理服务调用,需要遵循的他的模式,通常代码是这个样子的: var client = DaprClient.CreateInvokeHttpClient(appId: " ...

  10. Linux--文件描述符、文件指针、索引节点

    Linux -- 文件描述符 文件描述符 Fd 当进程打开文件或创建新文件时,内核会返回一个文件描述符(非负整数),用来指向被打开的文件,所有执行I/O操作的系统调用(read.write)都会通过文 ...