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 的创新的界面交互和动画效果,值得 ...
随机推荐
- Java代理设计模式(Proxy)的四种具体实现：静态代理和动态代理
面试问题:Java里的代理设计模式(Proxy Design Pattern)一共有几种实现方式?这个题目很像孔乙己问"茴香豆的茴字有哪几种写法?" 所谓代理模式,是指客户端(Cl ...
- Mysql闪回工具之binlog2sql的原理及其使用
生产上误删数据.误改数据的现象也是时常发生的现象,作为运维这时候就需要出来补锅了,最开始的做法是恢复备份,然后从中找到需要的数据再进行修复,但是这个时间太长了,对于大表少数数据的修复来讲,动作太大,成 ...
- Linux部署多个tomcat
Linux部署多个tomcat 1.环境:1.1. Centos 5.01.2.Tomcat 5.5.17 2.需要解决一下几个问题2.1.不同的tomcat启动和关闭监听不同的端口2.2.不同的to ...
- python之常见的坑
li = [1,2,3,4] # [1,3,4] # 索引值是奇数的删除 for i in range(4): if i % 2 == 1: li.pop(i) # 会报错 print(li) 面试题 ...
- 10.字符串str的语法
1).字符串的索引以及切片 s = 'ABCDLSESRF' #索引 s1 = s[0] print(s1) #A s2 = s[2] print(s2) #C s3 = s[-1] print(s3 ...
- Java8新特性Lambda表达式
List<RoleDO> allRoles = roleService.list(); //获取角色中备注不是app的集合List<RoleDO> webRoles = all ...
- linux 用dd命令读写引导区文件
分类: LINUX 备份MBR,linux下使用如下命令: # dd if=/dev/hda of=/root/linux.bin bs=512 count=1 这里注意使用if=/dev/hda备份 ...
- （7）zabbix资产清单inventory管理
概述 监控的设备越来越多,有时候搞不清楚哪台服务器是什么配置,大多公司有自己的资产清单,要去专门的系统查询显得多少有点麻烦.为此,zabbix专门设置了设备资产管理功能. 我们创建或编辑主机的时候,可 ...
- service worker 消息推送
https://developers.google.com/web/fundamentals/codelabs/push-notifications/?hl=en 首先下载源码: git clone ...
- mem之读操作调式总结(跟入栈出栈有关）
现象: 1.当case比较复杂的时候(含有for循环对mem进行读/写) 发现for循环时总是有汇编指令不执行跳过去了,(其实是汇编不熟和指令太多无法理智分析指令了). 事实是指令是对的,但执行错了( ...