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代 ...
随机推荐
- 【学习笔记】conda总结
conda常用命令 conda create -n name python=x.x #创建环境 conda activate name #进入环境 conda deactivate #退出环境 con ...
- Scrapy 爬虫框架学习笔记(未完，持续更新)
Scrapy 爬虫框架 Scrapy 是一个用 Python 写的 Crawler Framework .它使用 Twisted 这个异步网络库来处理网络通信. Scrapy 框架的主要架构 根据它官 ...
- VSCode 使用
运行时,如何弹出cmd命令窗口:将launch.json文件中的 externalConsole设置为true,并按F5运行(不要按右上角的运行按钮) 如何cin:先再命令窗口通过g++ *.cpp生 ...
- Linux虚拟机与主机网络连接配置与文件传输
网络配置 对于VMware虚拟机 1. 设置linux系统的网络配置,如下(NAT为默认配置,这里采用这一配置) 2. 主机中配置本地连接-属性-共享-勾选红框配置项,如下: 3.重启虚拟机. ...
- CSS样式实现表头和列固定
效果图:第一行和第一列固定 <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...
- 第一篇 -- Jmeter的安装下载
参考链接:https://blog.csdn.net/wust_lh/article/details/86095924 本篇介绍的是在Windows下安装Jmeter. 一.下载Jmeter 官网下载 ...
- 【阅读笔记】Java核心技术卷一 #5.Chapter7
7 异常.断言和日志 在 Java 中,如果某个方法不能够采用正常的途径完整它的任务,就可以通过另外一个路径退出方法. 在这种情况下,将会立刻退出,并不返回任何值,而是抛出(throw)一个封装了错误 ...
- 自制车速记录仪「GitHub 热点速览 v.21.31」
作者:HelloGitHub-小鱼干 如果你有一辆普通的自行车,那么就可以使用下 X-TRACK 这个项目制作一个自己的测速器,记录你的行驶轨迹还有车速,体验一把硬件发烧友的乐趣.如果你有一个非 ma ...
- 关于 IE８ console不未定义的问题
在开发的过程中由于调试的原因,在代码中加入console.info("xxxx"),而未进行删除 在IE8下测试该代码所在的页面报错,如下: 需要注意的是,使用console对象查 ...
- Java架构师-十项全能学习笔记（1）
Java架构师-十项全能学习笔记(1) @Configuration @EnableStateMachine public class OrderStateMachineConfig extends ...