jQuery中的效果（九）：hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()、fadeTo()、animate等
<!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等的更多相关文章
- jQuery中的效果函数方法整理
注:以下所有的speed 参数可选,规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 以下所有的callback 参数可选,是效果完成后所执 ...
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- 前端基础-jQuery的动画效果
阅读目录 隐藏 显示 切换 下拉 上卷 显示 一.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- 4.2 《锋利的jQuery》jQuery中的动画
问题:queue()方法? tip0: jquery从1.9版本以上就不支持toggle()方法. // $("#panel h5.head").toggle(function() ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
- jQuery中的事件与动画 笔记整理
一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件的绑定和处 ...
- 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画
jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...
- jQuery 中的简单动画
制作动画常用方法: show("速度") 显示元素 hide("速度") 隐藏元素 toggle() 切换效果 例如下jQuery代 ...
随机推荐
- 在 Intenseye，为什么我们选择 Linkerd2 作为 Service Mesh 工具(Part.2)
在我们 service mesh 之旅的第一部分中,我们讨论了"什么是服务网格以及我们为什么选择 Linkerd2?".在第二部分,我们将讨论我们面临的问题以及我们如何解决这些问题 ...
- 使用mvn命令将pom和jar上传至nexus私服
要将自定义的jar或者pom上传至nexus私服,需要配置maven的settings文件! 上传至nexus私服配置 1. settings配置 <!-- maven设置私服对应的信息:id. ...
- c语言数据拼包
单片机数据拼包 对于数据包拼包方式常规方式有: 数组 指针 结构体 流 下文将此三种方式分别列举此数据包的实现. 然后对比优缺点. 本文举例数据包协议: 包头 长度Length 消息类型 消息序列号S ...
- 【阅读笔记】Java核心技术卷一 #3.Chapter5
5 继承 5.1 类.超类和子类 5.1.1 定义子类 超类(superclass)和子类(subclass), 基类(base class)和派生类(derived class), 父类(paren ...
- Python实用案例，Python脚本，Python实现批量加水印
往期回顾 Python实现自动监测Github项目并打开网页 Python实现文件自动归类 Python实现帮你选择双色球号码 Python实现每日更换"必应图片"为"桌 ...
- <题解>[IOI2019]景点划分
题目传送门(luogu) 题目传送门(loj) 这个题对我来说可以算是超出了我的能力范围 被学长拿来教我做构造,构造题真简单,构造题真是人,构造题真能手切... 首先对于本题,必须要知道dfs树这东西 ...
- 大数据学习（26）—— Spark之RDD
做大数据一定要有一个概念,需要处理的数据量非常大,少则几十T,多则上百P,全部放内存是不可能的,会OOM,必须要用迭代器一条一条处理. RDD叫做弹性分布式数据集,是早期Spark最核心的概念,是一种 ...
- vivo 全球商城：优惠券系统架构设计与实践
一.业务背景 优惠券是电商常见的营销手段,具有灵活的特点,既可以作为促销活动的载体,也是重要的引流入口.优惠券系统是vivo商城营销模块中一个重要组成部分,早在15年vivo商城还是单体应用时,优惠券 ...
- 一个故事看懂HTTPS
我是一个浏览器,每到夜深人静的时候,主人就打开我开始学习. 为了不让别人看到浏览记录,主人选择了"无痕模式". 但网络中总是有很多坏人,他们通过抓包截获我和服务器的通信,主人干了什 ...
- 删除EFI系统分区（ESP）后Windows无法启动，重建引导分区并修复启动的过程
@ 目录 一.开机故障描述 二.工具: 三.什么是EFI系统分区 四.如何查看EFI系统分区 五.删除后如何重建系统分区 1.建立未分配空间 2.建立ESP分区 3.按下图,ESP分区的大小200M即 ...