（九）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]) 返回值: ...
随机推荐
- Linux系统——机制策略（一）
机制策略(一) 形而上谓之道:形而下谓之器: ————易经 LinuxUnix设计理念提供的一种机制不是策略:1.如果说机制是一种框架,那么,策略就是填充框架的一个个具体实施.机制提供的就是一种开放而 ...
- git 使用报错记录
错误一:git fatal: unable to write new index file主要原因就是服务器磁盘空间不够导致的,增加服务器空间就OK了在百度上面搜索没得到什么有效信息,在gooogle ...
- 【07】node 之 Buffer
1.1. Buffer基本概念 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型.二进制可以存储电脑中任何数据(比如:一段文本.一张图片.一个硬盘,应该说电脑中所有的数据都是二进 ...
- 支付宝APP支付IOS手机端java后台版
版权声明:http://blog.csdn.net/u012131769/article/details/76639527#t8 转载:http://blog.csdn.net/u012131769/ ...
- pat 甲级 1049. Counting Ones (30)
1049. Counting Ones (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The tas ...
- Linux一些防攻击策略
来自http://www.imooc.com/learn/344
- C++ | class size
c++类大小和机器还有编译器有关.64位机器指针大小为8个字节,32位机器为4个字节. 每个实例在内存中都有一个独一无二的地址,为了达到这个目的,编译器往往会给一个空类隐含的加一个字节,这样空类在实例 ...
- Find Median from Data Stream - LeetCode
Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...
- IntelliJ IDEA关闭代码自动补全
关闭代码自动补全之后,可以使用[Ctrl]+[P]进行强制调出提示. [Editor]-[Code Completion]页里有个[Case sensitive completion],可以设置只第一 ...
- 无法获得VMCI 驱动程序的版本: 句柄无效。
写在前面 最近在电脑上安装了VMware虚拟机,在安装系统的使用,总提示错误“无法获得VMCI 驱动程序的版本: 句柄无效.”.最近刚买的电脑,也不会是系统的问题吧,为了装个虚机,总不能重装系统吧,没 ...