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 的创新的界面交互和动画效果,值得 ...
随机推荐
- iOS Block的本质(四)
iOS Block的本质(四) 上一篇文章iOS Block的本质(三)中已经介绍过block变量的捕获,本文继续探寻block的本质. 1. block内修改变量的值 int main(int ar ...
- 洛谷 P2910 [USACO08OPEN]寻宝之路Clear And Present Danger
题目描述 Farmer John is on a boat seeking fabled treasure on one of the N (1 <= N <= 100) islands ...
- Nodejs + Jshint自动化静态代码检查
1. 目的 提交代码前能够自动化静态代码检查,提高代码质量 2. 准备 1. Nodejs安装: 官方地址:http://nodejs.org/ 安装说明:根据电脑配置下载对应的版本进行 ...
- poj1338 Ugly Numbers 打表, 递推
题意:一个数的质因子能是2, 3, 5, 那么这个数是丑数. 思路: 打表或者递推. 打表: 若该数为丑数,那么一定能被2 或者3, 或者5 整除, 除完之后则为1. #include <ios ...
- 【转】Python 访问 HDFS
1.前言 hdfs , Hadoop Distributed File System.Hadoop的分布式文件系统,安全行和扩展性没得说. 访问HDFS的方式有以下几种: 命令行方式:FS Shell ...
- web框架 http协议
http 协议是超文本传输协议,位于osi七层的应用层,协议规定的就是请求与响应双方的一个消息格式,请求(请求行,请求头,空行,请求数据,请求行--请求方式URL协议版本\r\n请求头--user-a ...
- CS193p Lecture 6 - UINavigation, UITabBar
抽象类(Abstract):指的是这个类不能被实例化,只能被继承: OC中没有关键词来标明某个类是抽象类,只能在注释中标注一下: 抽象类中的抽象方法,必须是public的,使方法称为public的方法 ...
- fopen（）和socket（）的内在联系
int portone=socket(AF_INET,SOCK_STREAM, 0); printf("portone=%d",portone); printf("ope ...
- LeetCode 最大子序和
给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 解释: 连续子数组 ...
- 目录扫描工具DirBuster
DirBuster是用来探测web服务器上的目录和隐藏文件的.因为DirBuster是采用java编写的,所以运行前要安装上java的环境. 来看一下基本的使用: ①:TargetURL下输入要探测网 ...