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代 ...
随机推荐
- python -- namedtuple元组
- spring-2-AOP
AOP(面向切面编程) 面向切面编程, 即利用AOP可以对业务逻辑的各个部分进行隔离, 从而使得业务逻辑各个部分之间的耦合度降低, 提高程序的可重用性, 同时提高了开发的效率. 不通过修改源代码,通过 ...
- 40.qt quick- 高仿微信实现局域网聊天V4版本(支持gif动图表情包、消息聊天、拖动缩放窗口)
在上章37.qt quick- 高仿微信实现局域网聊天V3版本(添加登录界面.UDP校验登录.皮肤更换.3D旋转),我们已经实现了: 添加登录界面. UDP校验登录. 皮肤更换. 3D旋转(主界面和登 ...
- 去掉返回的json中特殊字符
private static String jsonString(String s) { char[] temp = s.toCharArray(); int n = temp.length; for ...
- Spring 框架中都用到了哪些设计模式
Spring 框架中都用到了哪些设计模式? Spring 框架中使用到了大量的设计模式,下面列举了比较有代表性的: 1.代理模式-在 AOP 和 remoting 中被用的比较多. 2.单例模式:在 ...
- vulnhub-DC:1靶机渗透记录
准备工作 在vulnhub官网下载DC:1靶机https://www.vulnhub.com/entry/dc-1,292/ 导入到vmware 打开kali准备进行渗透(ip:192.168.200 ...
- CentOS7下OpenLDAP部署
OpenLDAP作为开源的LDAP服务,可用于搭建统一认证平台,在很多企业内部应用比较广泛,本文将介绍在CentOS7下OpenLDAP的部署. 环境: CentOS 7.4 OpenLDAP 2.4 ...
- [CTF] CTF入门指南
CTF入门指南 何为CTF ? CTF(Capture The Flag)夺旗比赛,在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式.CTF起源于1996年DEFCON全球黑客大会 ...
- Linux 基础指令初识
Linux 基础指令初识 01. ls 指令 语法: ls [选项] [目录或文件] 功能:对于目录,该命令列出该目录下的所有子目录与文件.对于文件,将列出文件名以及其他信息 -a 列出目录下的所有文 ...
- [JS]异步任务之事件循环
前言 常常会听到单线程和多线程这两个名词,单线程即一个时间段内程序从上到下执行任务,多线程即一个时间段内程序同时执行多个任务. 然而 JavaScript 是单线程的,它不像 Java 那样新开启一个 ...