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代 ...
随机推荐
- modelsim 独立仿真vivado的IP核及仿真脚本
Modelsim独立仿真vivado的IP 最近一直在做local dimming项目的FPGA硬件实现,算法的其中一步就是直方图统计,即数字图像的某一灰度级的像素数,这个直方图的源码找了半天才搞到, ...
- Redis学习——常用小功能
一.慢查询分析(查询日志:所谓慢查询日志就是系统在命令执行前后计算每条命令的执行时间,当超过预设阀值,就将这条命令的相关信息(例如:发生时间,耗时,命令的详细信息)记录下来,Redis也提供了类似的功 ...
- sublime安装emmet
1,先安装package install 2,然后安装emmet,安装完后会自动load加载Pyv8,如果加载不成功只能手动下载(详情可以百度).
- DIV+css排版问题技巧总结---v客学院技术分享
DIV+css排版问题技巧总结 一．排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...
- springMVC-12-整合spring和springmvc
问题1: 好像我们只需要使用springmvc的配置文件作为IOC容器就可以了 --> 需要进行Spring 整合SpringMVC吗? ----> 还是否需要再加入Spring的IOC容 ...
- tensorflow2 自定义损失函数使用的隐藏坑
Keras的核心原则是逐步揭示复杂性,可以在保持相应的高级便利性的同时,对操作细节进行更多控制.当我们要自定义fit中的训练算法时,可以重写模型中的train_step方法,然后调用fit来训练模型. ...
- Spring Boot的MyBatis注解：@MapperScan和@Mapper（十七）
1.Spring Boot与MyBatis融合的矛盾问题: Spring家族的使命就是为了简化而生,但是随着Spring的发展壮大,有点事与愿违了.为了坚持初心,Spring家族祭出了一大杀器---S ...
- SAML 2.0简介（1）
1.什么是SAML: SAML是Web浏览器用来通过安全令牌启用单点登录(SSO)的标准协议 2.优点: 跨多个应用程序管理用户身份和授权. 3.单点登录(SSO)是什么: 它使用户仅使用一组凭据(用 ...
- ES6 属性方法简写一例：vue methods 属性定义方法
const o = { method() { return "Hello!"; } }; // 等同于 const o = { method: function() { retur ...
- git学习心得之git跨分支提交代码
最近在工作中遇到了git跨分支提交代码的问题,本地拉的是远程master分支的代码,需要将本地修改代码提交到远程temp分支. 1.在gitlab上对相应项目fork本地分支 2.更新本地代码,将远程 ...