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 的创新的界面交互和动画效果,值得 ...
随机推荐
- Yii2.0数据格式器
平时我们在写代码中,总是要写一个单独的文件来全局处理常用的数据格式.Yii2.0却很人性化,为我们内置了一套数据格式器. 1.格式化日期和时间 Yii::$app->formatter-> ...
- hihoCoder #1068 : RMQ-ST算法（模板）
AC G++ 826ms 146MB 思路: 时间复杂度O(nlogn). //#include <bits/stdc++.h> #include <iostream> #in ...
- 洛谷 P2068 统计和
题目描述 给定一个长度为n(n<=100000),初始值都为0的序列,x(x<=10000)次的修改某些位置上的数字,每次加上一个数,然后提出y (y<=10000)个问题,求每段区 ...
- 51nod 1174 区间中最大的数（送盾题）
基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有数中,最大的数是多少. ...
- The Singapore NRIC Check Digit
The Singapore NRIC number is made up of 7 digits and a letter behind. This letter is calculated from ...
- 打通C/4HANA和S/4HANA的一个原型开发：智能服务创新案例
今年6月SAP发布C/4HANA之后,有顾问朋友们在微信公众号后台留言,询问C/4HANA如何同SAP的数字化核心S/4HANA系统结合起来,从而打通企业的前后端业务,帮助企业实现数字化转型. 有的顾 ...
- 120. Triangle 以及一个多维vector如何初始化
1.刚开始result的初始化写的是vector<vector<int>> result,然后再去对result[0][0] = triangle[0][0]赋值,一直报错.老 ...
- SC || 关于java迭代中修改迭代集合的操作
在通过for循环遍历整个List/Map等的时候,如果想要进行remove的操作,这时就更改了迭代集合,会出现错误 一种方法是如果只会remove一个可以remove后直接break 另一种是把集合先 ...
- laydate控件后台返回的时间前台格式化
//功能:laydate控件后台返回的时间前台格式化 //参数:laydate控件值 function formatDate(strTime) { if ("" === strTi ...
- CF-1082（渣渣只做了前三个）
链接:http://codeforces.com/contest/1082 A. Vasya and Book 题意: n,x,y,d 一本电子书有n页,每一次翻动只能往前或者往后翻d页.求x-> ...