<!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. 春招后端阿里腾讯字节美团Offer拿来吧你，面试经验分享

    近期很多童鞋在准备校招了,找了蚂蚁的一位童鞋,给大家分享一波面试经验,以及面试心得,希望能帮大家在秋招拿到一个好结果 我自己的22届春招实习算是告一段落,给自己做个总结,也给大家分享一下面试的一些心得 ...

  2. 算法leetcode二分算法

    二分算法通常用于有序序列中查找元素: 有序序列中是否存在满足某条件的元素: 有序序列中第一个满足某条件的元素的位置: 有序序列中最后一个满足某条件的元素的位置. 思路很简单,细节是魔鬼. 一.有序序列 ...

  3. Go LRU Cache 抛砖引玉

    目录 1. LRU Cache 2. container/list.go 2.1 list 数据结构 2.2 list 使用例子 3. transport.go connLRU 4. 结尾 正文 1. ...

  4. Linux下Apache(HTTP)基础知识梳理-运维笔记

    HTTP介绍: HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传 ...

  5. 网络损伤仪WANsim中的时延的不同模型

    网络损伤仪WANsim中的3种时延模型 时延指的是报文从网络的一端到达另一端所花费的时间. 网络损伤仪WANsim中为用户提供了3种时延损伤的模型.常量模型.均匀分布.正态分布. 这3种模型按照各自的 ...

  6. LC-322. 零钱兑换

    322. 零钱兑换 给你一个整数数组 coins ,表示不同面额的硬币:以及一个整数 amount ,表示总金额. 计算并返回可以凑成总金额所需的 最少的硬币个数 .如果没有任何一种硬币组合能组成总金 ...

  7. session及cookie详解（七）

    前言 文章说明 在每整理一个技术点的时候,都要清楚,为什么去记录它.是为了工作上项目的需要?还是为了搭建技术基石,为学习更高深的技术做铺垫? 让每一篇文章都不是泛泛而谈,复制粘贴,都有它对自己技术提升 ...

  8. Tomcat修改最大连接数及查看最大连接数

    一.背景 公司进行安全整改, 技术要求:会话限制:应能够对应用系统的最大并发会话连接数进行限制: 提供凭证:提供对系统最大并发会话连接数进行限制的截图,需要将所有被检查系统中间件配置截图,如果不限制最 ...

  9. Input 只能输入正数以及2位小数点

    <input onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d ...

  10. Lateral Movement

    简介 这次去宁夏护网,发现我有的朋友连最基本的横向渗透有些都不晓得,他们问我 我也表达不清楚...,就想着写篇文章总结下吧 (慢慢更..) 可以发我邮箱讨论:muxue@protonmail.com ...