（九）jQuery中的动画(载)
原文链接：http://blog.csdn.net/zfy865628361/article/details/50358367
首先，用jQuery做动画效果要求在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">
一、最常用的动画方法，show()和hide()方法
示例代码:
<span style="font-size:14px;">$("div").hide();
$("div").show();</span>
上面示例为show()和hide()方法不带任何参数的情况下，作用是立即隐藏或显示匹配的元素，不会有任何动画。如果给方法指定一个速度参数，就可以让元素动起来。如下代码使元素在500ms中完成动画
$("div").hide(500);
$("div").show(500);
此外速度参数还有一些推荐值，如：
$("div").show("slow"); //600ms
$("div").show("normal"); //400ms
$("div").show("fast"); //200ms
下面就用这两个方法实现点击按钮一次内容慢慢消失，当再次单击按钮内容慢慢的显示
$(".btn").click(function() {
if ($(".newsInfo").is(":visible")) {//如果为显示状态
$(".newsInfo").hide(500);
} else {
$(".newsInfo").show(500);
}
});
说明：当为一个元素调用hide()方法时，会将该元素的display样式改为"none"，但是在这之前会先记住原先的display属性值("block"或"inline"或其他除了"none"之外的值)。当调用show()方法时，就会根据hide()方法记住的display属性值来显示元素。
二、fadeIn()方法和fadeOut()方法
与show()方法不相同的是这两个方法只改变元素的不透明度。fadeOut(0方法会在指定的一段时间内降级元素的不透明度，直到元素完全消失("display:none")。fadeIn()方法则相反。
下面就用这两个方法实现点击按钮一次内容慢慢消失，当再次单击按钮内容慢慢的显示
$(".btn").toggle(function() {
$(this).next(".newsInfo").fadeOut(500);
}, function() {
$(this).next(".newsInfo").fadeIn(500);
});
三、slideUp()方法和slideDown()方法
这两个方法只会改变元素的高度。如果一个元素的display属性值为"none"，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下倒上缩短隐藏。
下面就用这两个方法实现鼠标箭头移动到按钮上时内容向下出现，当鼠标的箭头移出按钮时内容向上退出显示
$(".btn").hover(function() {
$(".newsInfo").stop(true).slideDown(500);
}, function() {
$(".newsInfo").stop(true).slideUp(500);
});
其中用到了一个stop()方法，它的语法结构为:stop([clearQueue] [, gotoEnd]);
参数clearQueue和gotoEnd都是可选参数，为布尔值。clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。如果直接使用stop()方法，则会立即停止当前正在进行的动画。
四、自定义简单动画animate()
语法结构：animate(params，speed，callback)；
参数说明:params：一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2", ...}
speed：速度参数，可选
callback：在动画完成时执行的函数，可选
$(".btn").click(function() {
$(this).animate({
left: "300px",
height: "200px"
}, 1000, function() {
console.log('回调了');
① toggle(speed，[callback])
$(".btn").toggle(500, function() {
console.log('我是回调函数');
});
② slideToggle(speed，[callback])
<span style="font-size:14px;">$(".btn").click(function(){
$(".mycontent").slideToggle();
});</span>
$(".btn").click(function(){
$(".mycontent").fadeTo(500,0.2);
});
（九）jQuery中的动画(载)的更多相关文章
- jQuery学习笔记（四）jQuery中的动画
目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...
- jQuery笔记（四）jQuery中的动画
jQuery最吸引人的地方莫过于能做出绚丽的动画了,也是能极大提高用户体验的地方,这次我们就来一探jQuery中的动画! 一. show()方法和hide()方法 show()方法与hide()方法是 ...
- 第五章 jQuery中的动画
通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- jQuery中的动画理论干货
[jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- jQuery中的动画与特效
1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...
- JQuery中的动画
一.show()方法和hide()方法 这两种方法是jQuery动画的最基本方法.当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hid ...
- 【学习笔记】jQuery中的动画与效果
1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback]) 返回值: ...
随机推荐
- POJ2152 Fire 【树形dp】
题目链接 POJ2152 题解 经典老题,还真暴力 \(n \le 1000\),所以可以\(O(n^2)\)做 所以可以枚举每个点依附于哪一个点 设\(f[u]\)表示以\(u\)为根的子树的最小代 ...
- express中放置静态文件
不使用模版引擎的话要直接添加html,可以使用express.static()中间件设定静态文件目录,然后将html文件放在里面,如:express默认静态文件目录为 app.use(express. ...
- mongodb学习（3）--- NodeJs使用mongoose操作mongodb
转载: https://cnodejs.org/topic/50c145ed637ffa4155c7eaee 首先对于以下错误说明(有写 db.close): Error: db object alr ...
- IOS 滑动指示导航栏 渐变
关于导航栏渐变,本人在写APP的时候,发现了各路大神各现其通,其实我觉得这个是个很简单的问题,不需要搞得那么麻烦,对个项目要求整齐来说,一般会建一个工具类,自定义View,各个同事需要的时候,直接调用 ...
- hdu 4293 区间DP
/* 题目大意:n个人分成若干组,每个人都描叙他们组前面有多少人后面有多少人, 求说真话的人最多有多少个. 解题思路:把同一组的人数统计起来他们组前面有x人后面有y人, num[x+1][n-y]表示 ...
- OpenJudge 2971 抓住那头牛
总时间限制: 2000ms 内存限制: 65536kB 描述 农夫知道一头牛的位置,想要抓住它.农夫和牛都位于数轴上,农夫起始位于点N(0<=N<=100000),牛位于点K(0< ...
- [LeetCode] Remove Duplicates from Sorted List 链表
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- pcm2aac
1.下载faac源代码:http://downloads.sourceforge.net/faac/faac-1.28.zip 2.在VAWARE上进行交叉编译,安装. ./configure --t ...
- C++序列化对象
需求 . 在写代码的过程中,经常会需要把代码层面的对象数据保存到文件,而这些数据会以各种格式存储．例如:json,xml,二进制等等．最近恰好就需要把对象以二进制存储到硬盘．这是一个很简单的需求,相比 ...
- 【转载】Word2010编号列表&多级列表
1.引用场景 对于一份标准.漂亮的word文档,编号列表和多级列表的设置时必不可少的,正因为有它们,文档看起来才更专业,使用起来才更加的方便.如下面截图一般,这是十分常见的多级列表设置 ...