（九）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]) 返回值: ...
随机推荐
- git pull命令模式
git pull 默认等于 git fetch + git mergegit pull --rebase 等于 git fetch + git rebasegit pull -–squash 等于 g ...
- chilitags使用心得
chilitags是一个相当好的CV方向的开源项目,不过在github上follow的人不多, 国内也基本没有这方面的消息,前几天同事给我安利了这个,使用了一下和看了源码以后..我觉得这个东西以后一定 ...
- 【bzoj3585】mex 线段树 mex，sg
Description 有一个长度为n的数组{a1,a2,…,an}.m次询问,每次询问一个区间内最小没有出现过的自然数. Input 第一行n,m. 第二行为n个数. 从第三行开始,每行一个询问l, ...
- Nature Reserve
Nature Reserve time limit per test:2 seconds memory limit per test:256 megabytes input:standard inpu ...
- （三）Spring 依赖注入
一.Spring框架本身有四大原则: 使用POJO进行轻量级和最小侵入式开发. 通过依赖注入和接口变成实现松耦合. 通过AOP和默认习惯进行声明式变成. 使用AOP和模板减少模式化代码. Spring ...
- WSDL协议简单介绍
WSDL – WebService Description Language – Web服务描述语言 通过XML形式说明服务在什么地方-地址. 通过XML形式说明服务提供什么样的方法 – 如何调用. ...
- Qualcomm MPM introduction
在 Qualcomm chip 裡有一個 hardware block 名為 MPM. 在 RPM CPU halts 後,MPM 會保持在 on 的狀態用來處理 全系統 sleep process ...
- 【原创】Word2010 清除样式
使用场景 有时候我们在网页上面粘贴一些精华文章或者从去整理别人已经完成的word的时候,会发现它自带的格式,可能并不是我们所理想的格式,所以此时就不得不去重新编辑其格式,但是word里 ...
- PowerDesigner中如何生成主键和自增列
1.SQL Server版本: 第一步,首先要建立与数据库的连接,方法较多,这里举个例子: http://www.cnblogs.com/netsql/archive/2010/05/17/17375 ...
- Linux和Cisco命令行通用快捷键。
Ctrl a e 行首,行尾(ahead,end)Esc f b 单词首,单词尾Ctrl f b 移动光标(forward,backwards) Ctrl u k 剪切光标前所有,剪切光标后所有Ctr ...