原文链接：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>
③  fadeTo(speed，opacity，[callback])
$(".btn").click(function(){

　　$(".mycontent").fadeTo(500,0.2);

});

（九）jQuery中的动画(载)的更多相关文章

  1. jQuery学习笔记（四）jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  2. jQuery笔记（四）jQuery中的动画

    jQuery最吸引人的地方莫过于能做出绚丽的动画了,也是能极大提高用户体验的地方,这次我们就来一探jQuery中的动画! 一. show()方法和hide()方法 show()方法与hide()方法是 ...

  3. 第五章 jQuery中的动画

    通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...

  4. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  5. jQuery中的动画理论干货

    [jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...

  6. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  7. jQuery中的动画与特效

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...

  8. JQuery中的动画

    一.show()方法和hide()方法 这两种方法是jQuery动画的最基本方法.当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hid ...

  9. 【学习笔记】jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

随机推荐

  1. BZOJ 4070 [Apio2015]雅加达的摩天楼 ——分块 SPFA

    挺有趣的分块的题目. 直接暴力建边SPFA貌似是$O(nm)$的. 然后考虑分块,$\sqrt n$一下用虚拟节点辅助连边, 以上的直接暴力连边即可. 然后卡卡时间,卡卡空间. 终于在UOJ上T掉辣. ...

  2. http长短连接和长短轮询

    http长连接 http长连接是指http的请求头和响应头的均有connection: keep-alive的请求,也就是客户端和服务端均为keep-alive的请求. 实际上,http是请求/响应式 ...

  3. Accelerating Enum-Based Dictionaries with Generic EnumComparer

    原文发布时间为:2011-03-03 -- 来源于本人的百度文章 [由搬家工具导入] 文章：http://www.codeproject.com/KB/cs/EnumComparer.aspx 源码： ...

  4. hdu 2243 考研路茫茫——单词情结 AC自动机 矩阵幂次求和

    题目链接 题意 给定\(N\)个词根,每个长度不超过\(5\). 问长度不超过\(L(L\lt 2^{31})\),只由小写字母组成的,至少包含一个词根的单词,一共可能有多少个? 思路 状态(AC自动 ...

  5. 在android app中使用STL库（转）

    1.在jni目录下新建Application.mk; 加入 APP_STL := stlport_static右边的值还可以换成下面几个: system - 使用默认最小的C++运行库,这样生成的应用 ...

  6. Spring Boot学习——Controller的使用

    本文主要记录几个注释的使用方法. 1. @Controller : 处理http请求 2. @RequestMapping : 配置URL映射 3. @RestController : 组合注解,sp ...

  7. 前端优化 -- Combo Handler

    Combo Handler来合并CSS/JS文件 背景 Combo Handler是Yahoo!开发的一个Apache模块,它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件, ...

  8. nodejs编写实例基础操作

    学习视频地址 https://cnodejs.org/topic/5a72c66ace45d440451465c3   初始化项目 首先查看项目中是否有package.json 文件,如果有可执行np ...

  9. MySQL的XA_prepare_event类型binlog的解析

    为了支持新版的xa事务,MySQL新加了一种binlog event类型:XA_prepare 项目中使用的开源组件mysql-binlog-connector-java无法解析此种binlog ev ...

  10. 洛谷——P2205 [USACO13JAN]画栅栏Painting the Fence

    题目描述 Farmer John has devised a brilliant method to paint the long fence next to his barn (think of t ...