jQuery动画与效果
jQuery动画与效果
- 1 显示与隐藏元素
- 1.1 显示元素
- 1.2 隐藏元素
- 1.3 交替显示元素
- 2 滑动效果
- 2.1 向上收缩效果
- 2.2 向下展开效果
- 2.3 交替伸缩元素
- 3 淡入淡出效果
- 3.1 淡出效果
- 3.2 淡入效果
- 3.3 交替淡入淡出
- 3.4 自定义不透明度淡出
- 4 自定义动画效果
1 显示与隐藏元素
1.1 显示元素
很多时候，有些比较细节性的信息开始的时候没有必要让用户看到，可以让用户想要查看的时候再显示出来。传统的处理方式是转向到另外一个页面进行显示，这样就使用户离开了先前的页面，而这可能并不是用户想要的。
jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数。
| 函数名 | show(speed,[callback]) |
|---|---|
| 作用 | 以动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度 |
| 返回值 | jQuery |
| 参数 |
speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) callback (Function)：在动画完成时执行的函数，每个元素执行一次 |
1.2 隐藏元素
经常会在网站上见到这种效果，某些需要显示给用户的信息，可能在用户看过之后就不需要再留在页面上了。一般的处理方式是在这种元素旁边多一个按钮，由用户决定是否将该元素在页面上隐藏。
| 函数名 | hide(speed,[callback]) |
|---|---|
| 作用 | 以动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度 |
| 返回值 | jQuery |
| 参数 |
speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) callback (Function)：在动画完成时执行的函数，每个元素执行一次。 |
示例：点击“显示图片”按钮显示图片，点击“隐藏图片”按钮隐藏图片
<button id="btn1">显示图片</button><button id="btn2">隐藏图片</button><br><img src="./images/p1.jpg" id="img" width="200"><script>$(function () {$("#btn1").bind("click", function () {$("#img").show(1000);})$("#btn2").bind("click", function () {$("#img").hide(1000);})})</script>
1.3 交替显示元素
jQuery中用于实现交替显示隐藏的函数是toggle(speed,[callback]) 。
| 函数名 | toggle(speed,[callback]) |
|---|---|
| 作用 | 以的动画切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的 |
| 返回值 | jQuery |
| 参数 |
speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) callback (Function)： 在动画完成时执行的函数，每个元素执行一次 |
示例：点击同一个按钮，控制图片的出现与隐藏
<button id="btn1">交替显示图片</button><br><img src="./images/p1.jpg" id="img" width="200"><script>$(function () {$("#btn1").bind("click", function () {$("#img").toggle(1000);})})</script>
2 滑动效果
2.1 向上收缩效果
所谓向上收缩效果就是对页面元素通过高度变化（向上减小）来动态地隐藏。在jQuery中实现该效果的函数是slideUp(speed,[callback]) 。
| 函数名 | slideUp(speed,[callback]) |
|---|---|
| 作用 | 通过高度变化来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 |
| 返回值 | jQuery |
| 参数 |
speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000） callback (Function)： 在动画完成时执行的函数，每个元素执行一次 |
示例：点击按钮收缩图片。
<button id="btn1">收缩图片</button><br><img src="./images/p1.jpg" id="img" width="200"><script>$(function () {$("#btn1").bind("click", function () {$("#img").slideUp(1000);})})</script>
2.2 向下展开效果
向上收缩用于元素的隐藏，向下展开则用于隐藏元素的显示。jQuery中用于实现向下滑动展开元素内容的函数为slideDown(speed,[callback]) 。
| 函数名 | slideDown(speed,[callback]) |
|---|---|
| 作用 | 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数 |
| 返回值 | jQuery |
| 参数 |
speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 callback (Function)： 在动画完成时执行的函数，每个元素执行一次 |
示例：点击按钮１收缩图片，点击按钮２展开图片。
<button id="btn1">收缩图片</button><button id="btn2">展开图片</button><br><img src="./images/p1.jpg" id="img" width="200"><script>$(function () {$("#btn1").bind("click", function () {$("#img").slideUp(1000);})$("#btn2").bind("click", function () {$("#img").slideDown(1000);})})</script>
2.3 交替伸缩元素
交替伸缩样式和交替显示隐藏类似，都是当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。只不过这里显示的动画效果是向上或者向下滑动。jQuery中处理交替伸缩样式的函数是slideToggle(speed,[callback]) 。
| 函数名 | slideToggle(speed,[callback]) |
|---|---|
| 作用 | 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数 |
| 返回值jQuery | |
| 参数 |
speed (String,Number)：种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000） callback (Function)：在动画完成时执行的函数，每个元素执行一次 |
示例：点击按钮收缩图片，再点击按钮展开图片，交替显示
<button id="btn1">交替收缩图片</button><br><img src="./images/p1.jpg" id="img" width="200"><script>$(function () {$("#btn1").bind("click", function () {$("#img").slideToggle(1000);})})</script>
3 淡入淡出效果
3.1 淡出效果
淡出效果是指页面上元素的透明度不断增大，直到消失不见的效果。jQuery中处理淡出效果的是fadeOut(speed,[callback])函数。
| 函数名 | fadeOut(speed,[callback]) |
|---|---|
| 作用 | 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数 |
| 返回值 | jQuery |
| 参数 |
speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 callback (Function)：在动画完成时执行的函数，每个元素执行一次。 |
<button id="btn1">淡出效果</button><br><img src="./images/p1.jpg" id="img" width="200"><script>$(function () {$("#btn1").bind("click", function () {$("#img").fadeOut(1000);})})</script>
3.2 淡入效果
淡入效果是指页面上元素的透明度不断减小，直到清晰显示出来的效果。在jQuery中实现淡入效果使用fadeIn(speed,[callback])函数。
| 函数名 | fadeIn(speed,[callback]) |
|---|---|
| 作用 | 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数 |
| 返回值 | jQuery |
| 参数 |
speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 callback (Function)：在动画完成时执行的函数，每个元素执行一次 |
示例：点击按钮1淡出效果，点击按钮2淡入效果。
<button id="btn1">淡出效果</button><button id="btn2">淡入效果</button><br><img src="./images/p1.jpg" id="img" width="200"><script>$(function () {$("#btn1").bind("click", function () {$("#img").fadeOut(1000);})$("#btn2").bind("click", function () {$("#img").fadeIn(1000);})})</script>
3.3 交替淡入淡出
当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。
| 函数名 | fadeToggle(speed,[callback]) |
|---|---|
| 作用 | 根据元素变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数 |
| 返回值 | jQuery |
| 参数 |
speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 callback (Function)：在动画完成时执行的函数，每个元素执行一次。 |
示例：点击按钮图片淡出，再点击按钮图片淡入。
<button id="btn1">交替淡入淡出</button><br><img src="./images/p1.jpg" id="img" width="200"><script>$(function () {$("#btn1").bind("click", function () {$("#img").fadeToggle(1000);})})</script>
3.4 自定义不透明度淡出
fadeOut(speed,[callback])函数和fadeIn(speed,[callback])函数实现的最终结果要么是完全显示元素，要么是完全隐藏元素，不能够停留在中间的某个状态上。jQuery中专门有一个函数来设定最终结果为中间某个状态，换句话说就是设定最终的元素为半透明状态。这个函数就是fadeTo(speed,opacity,[callback])函数。
| 函数名 | fadeTo(speed,opacity,[callback]) |
|---|---|
| 作用 | 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数 |
| 返回值 | jQuery |
| 参数 |
speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 opacity (Number)：要调整到的不透明度值(0到1之间的数字)。 callback (Function)：（可选）在动画完成时执行的函数 |
示例：点击按钮，将图片淡出为50%透明度
<button id="btn1">淡出</button><br><img src="./images/p1.jpg" id="img" width="200"><script>$(function () {$("#btn1").bind("click", function () {$("#img").fadeTo(1000, 0.5);})})</script>
4 自定义动画效果
jQuery提供了诸如滑动效果、淡入淡出等一系列十分优秀的动画效果，可以让用户很方便就实现一些很酷的动画特效。
但是，这些简单的特效远远不能满足用户个性化的需求。因此，jQuery还有一个更加强大的动画生成机制，那就是自定义动画。
通过jQuery的自定义动画，可以随心所欲的实现用户需要的动画效果，有些效果甚至可以和Flash相媲美。本节将首先介绍jQuery中自定义动画的两种方式，然后介绍jQuery中动画队列的使用。
jQuery中用于自定义动画的函数是animate(params[,duration[,easing[,callback]]])函数。该函数可以有1～4个参数。
| 函数名 | animate(params[,duration[,easing[,callback]]]) |
|---|---|
| 作用 | 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”） |
| 返回值 | jQuery |
| 参数 |
params (Options)：一组包含作为动画属性和终值的样式属性和及其值的集合 duration (String,Number)：（可选）三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值（如1000）。 easing (String)：（可选）要使用的擦除效果的名称(需要插件支持).默认jQuery提供linear和swing。 callback (Function)：（可选）在动画完成时执行的函数 |
jQuery动画与效果相关推荐
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- jQuery 动画效果
1.基本效果 (1)隐藏 hide() hide(speed [,callback]) (2)显示 show() show(speed [,callback]) (3)交替显示隐藏 toggle() ...
- jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...
- jquery 动画总结（主要指效果函数）
动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种: 1 gif动画---这就是帧动画,把若 ...
- jQuery动画效果之上卷下拉
jQuery动画效果之上卷下拉 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Vis ...
- html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...
- 前端三件套系例之JQuery——JQuery动画效果、JQuery插件、
文章目录 1 JQuery动画效果 1. 基本效果 2. 滑动效果 3 淡入淡出效果 4 自定义动画 5 动画控制 6 设置 7 事件 7-1 常用事件 7-2 事件绑定 7-3 移除事件 7-4 阻 ...
- JavaScript - jQuery动画效果
trigger:触发v.触发器n toggle:触发器.开关n [ jQuery动画结束时的回调函数 ] .hide(1000,function(){alert("123"); } ...
- jQuery animate方法开发极客标签Logo动画融合效果
为什么80%的码农都做不了架构师?>>> 在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画 ...
最新文章
- 10分钟让你完全理解观察者模式
- shell脚本（五）——函数的格式、传参、变量、递归、函数库
- 关于module require的学习
- android+完美的列表,android完美讲义.pdf
- java面试技术问题_11个JAVA面试中常见技术问题
- perl anyevent socket监控web日志server
- Windows环境中jdk的下载、安装与配置
- 企业打开云HBase的正确方式，来自阿里云云数据库团队的解读
- 关于抢红包的_关于抢红包现象的材料作文
- 理解GetHashCode()的缺陷
- xampp的安装和配置
- HDU 1257 最少拦截系统 简单DP
- (5)Redis主从同步原理及详细配置
- MATLAB实现自编码器（五）——变分自编码器（VAE）实现图像生成的帮助函数
- mysql 分页查询数据重复出现
- 基于混沌系统的文本加密算法研究（一）——混沌及混沌加密的基础知识
- 京东后台：订单履约系统设计（下）
- git commit使用其他人的用户名和邮箱提交代码
- HTML语言中 blur()方法,HTML DOM blur() 方法
- 雀友腾讯跨界联合 北京打造全球顶级麻将锦标赛