jQuary的相关动画效果
第一种：该方法隐藏所有 <p> 元素：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
第二种：（如何隐藏部分文本。）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>中国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：张先生<br />
北三环中路 100 号<br />
北京</p>
</div>
<h3>美国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：David<br />
第五大街 200 号<br />
纽约</p>
</div>
</body>
</html>
第三种（hide() 和 show() 方法来隐藏和显示 HTML 元素：）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
第四种：（带有 speed 参数的 hide() 方法：）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
第五种：（使用 toggle() 方法来切换 hide() 和 show() 方法）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
第六种：（jQuery fadeIn() 用于淡入已隐藏的元素，其中若想淡出则使用fadeOut（）方法，并且去掉div中的display:none）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三张图片的淡入效果</title>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#aa").fadeIn();
$("#bb").fadeIn("slow");
$("#cc").fadeIn(4000);
});
});
</script>
</head>
<body>
<p>点击之后，三张图片淡入</p>
<button>点击这里，使三个矩形淡入</button>
<div id="aa" style="width:80px;height:80px;display:none;"></div>
<br>
<div id="bb" style="width:80px;height:80px;display:none;"></div>
<br>
<div id="cc" style="width:80px;height:80px;display:none;"></div>
</body>
</html>
第七种（jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#aa").fadeToggle();
$("#bb").fadeToggle("slow");
$("#cc").fadeToggle(3000);
});
});
</script>
</head>
<body>
<button>请点击</button>
<div id="aa" style="width:80px;height:80px;"></div>
<br>
<div id="bb" style="width:80px;height:80px;"></div>
<br>
<div id="cc" style="width:80px;height:80px;"></div>
</body>
</html>
第八种（jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".bb").click(function(){
$(".aa").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.aa,p.bb{
margin: 0px;
padding: 5px;
text-align: center;
background: #e5eecc;
border: solid 1px #c3c3c3;
}
.aa{
height: 150px;
display: none;
}
</style>
</head>
<body>
<div class="aa">
<p>啦啦啦啦啦</p>
<p>哈哈哈哈哈</p>
</div>
<p class="bb">请点击这里</p>
</body>
</html>
第九种（图片的动画效果其中用到方法包括1、 $("div").animate({ left:'250px',opacity:'0.5',height:'150px', width:'150px' });2、$("div").animate({ left:'250px', height:'+=150px',width:'+=150px'})3、$("div").animate({height:'toggle'});4、 var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");5、 var div=$("div");div.animate({left:'100px'},"slow");div.animate({fontSize:'3em'},"slow")；）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片的动画效果</title>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var div = $("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'5em'},"slow");
$("button").click(function(){
$("#aa").css("color","red").slideUp(2000).slideDown(2000);
})
});
</script>
</head>
<body>
<div style="height:200px;width:200px;background:green;position:absolute;">HELLO</div>
<p id="aa">看我在不停的动！</p>
<button>请点击</button>
</body>
</html>
jQuary的相关动画效果的更多相关文章
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- Android动画效果之初识Property Animation（属性动画）
前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...
- 深入学习jQuery的三种常见动画效果
× 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
- jQuery动画效果animate和scrollTop结合使用实例
CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...
- jquery插件——点击交换元素位置（带动画效果）
一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 12个来自 Codrops 的创新交互和动画效果
产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...
随机推荐
- 中国区 Azure 应用程序开发说明
1.文档简介 微软公司为其在境外由微软运营的 Azure 服务(以下简称为 “境外 Azure”),创建和部署云应用程序,提供了相应工具. 在中国,由世纪互联运营的 Microsoft Azure ( ...
- hihoCoder #1080 : 更为复杂的买卖房屋姿势 (线段树，多tag)
题意: 有编号为0~n的n+1个房屋,给出每个房屋的起始价格,随后给出m种修改,每次修改都要进行输出所有房屋的价格总和.修改有两种方式:(1)政府调控,编号L~R全置为同一价格(0)房屋自行涨跌,编号 ...
- codevs 1313 质因数分解
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题目描述 Description 已知正整数 n是两个不同的质数的乘积,试求出较大的那个质数 . 输入描述 I ...
- org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.binding.BindingException: Parameter 'userId' not found. Available parameters are [arg1, arg0, param1, param2]
2018-06-27 16:43:45.552 INFO 16932 --- [nio-8081-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/] : ...
- Bootstrap历练实例：验证状态
验证状态 Bootstrap 包含了错误.警告和成功消息的验证样式.只需要对父元素简单地添加适当的 class(.has-warning. .has-error 或 .has-success)即可使用 ...
- shell脚本，awk实现每个数字加1.
[root@localhost add]# cat file [root@localhost add]# cat file|awk '{for(i=1;i<=NF;i++){$i+=1}}1' ...
- js获取主机名实现页面跳转
<script language="javascript" type="text/javascript"> var hostname ...
- Shell脚本调用Oralce数据库SQL文生产日志
#!/bin/shexport LANG="zh.CN.GBK" echo -n "******************************************* ...
- C# 读App.config配置文件[2]: .Net Core框架
C# 读App.config配置文件[1]:.Net Framework框架 C# 读App.config配置文件[2]: .Net Core框架 网上都是.net framework读取配置文件的方 ...
- NSLayoutConstraint.constraintsWithVisualFormat详解，以及AlignAllCenterY
NSLayoutConstraint.constraintsWithVisualFormat详解,以及AlignAllCenterY 转载2015-07-08 18:02:02 鉴于苹果官方文档的解释 ...