[jQuery知识]jQuery之知识十-动画初级
来源:互联网 发布:java软件培训 编辑:程序博客网 时间:2024/05/20 00:48
前言
在以前很长一段时间里,网页上的各种特效还需要采用 flash 在进行。但最近几年里, 我们已经很少看到这种情况了,绝大部分已经使用 JavaScript 动画效果来取代 flash。这里 说的取代是网页特效部分,而不是动画。网页特效比如:渐变菜单、渐进显示、图片轮播等; 而动画比如:故事情节广告、MV 等等。
1.显示、隐藏
2.滑动、卷动
3.淡入、淡出
一.显示、隐藏
jQuery 中显示方法为:.show(),隐藏方法为:.hide()。在无参数的时候,只是硬性的显 示内容和隐藏内容。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
注意:.hide()方法其实就是在行内设置 CSS 代码:display:none; 而.show()方法要根据原 来元素是区块还是内联来决定,如果是区块,则设置 CSS 代码:display:block; 如果是内联, 则设置 CSS 代码:display:inline;。
在.show()和.hide()方法可以传递一个参数,这个参数以毫秒(1000 毫秒等于 1 秒钟)来控 制速度。并且里面富含了匀速变大变小,以及透明度变换。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
除了直接使用毫秒来控制速度外,jQuery 还提供了三种预设速度参数字符串:slow、 normal 和 fast,分别对应 600 毫秒、400 毫秒和 200 毫秒。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
注意:不管是传递毫秒数还是传递预设字符串,如果不小心传递错误或者传递空字符串。 那么它将采用默认值:400 毫秒。
- 1
- 2
- 3
- 1
- 2
- 3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判 断。而 jQuery 提供给我们一个类似功能的独立方法:.toggle()。
- 1
- 2
- 3
- 1
- 2
- 3
二.滑动、卷动
jQuery 提供了一组改变元素高度的方法:.slideUp()、.slideDown()和.slideToggle()。顾名 思义,向上收缩(卷动)和向下展开(滑动)。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
注意:滑动、卷动效果和显示、隐藏效果一样,具有相同的参数。
三.淡入、淡出
jQuery 提供了一组专门用于透明度变化的方法:.fadeIn()和.fadeOut(),分别表示淡入、 淡出,当然还有一个自动切换的方法:.fadeToggle()。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
上面三个透明度方法只能是从 0 到 100,或者从 100 到 0,如果我们想设置指定值就没 有办法了。而 jQuery 为了解决这个问题提供了.fadeTo()方法。
- 1
- 2
- 3
- 1
- 2
- 3
注意:淡入、淡出效果和显示、隐藏效果一样,具有相同的参数。对于.fadeTo()方法, 如果本身透明度大于指定值,会淡出,否则相反。
- [jQuery知识]jQuery之知识十-动画初级
- [jQuery知识]jQuery之知识十-动画初级
- [jQuery知识]jQuery之知识七-事件初级
- [jQuery知识]jQuery之知识十一-Ajax初级
- [jQuery知识]jQuery之知识七-事件初级
- [jQuery知识]jQuery之知识十二-Ajax初级
- [jQuery知识]jQuery之知识十一-动画高级
- [jQuery知识]jQuery之知识十一-动画高级
- [jQuery知识]jQuery之知识十一-动画高级
- [jQuery知识]jQuery之知识三-过滤器
- [jQuery知识]jQuery之知识体系
- [jQuery知识]jQuery之知识三-过滤器
- [jQuery知识]jQuery之知识三-过滤器
- jQuery动画相关知识学习
- JQuery知识
- JQuery知识
- jquery知识
- Jquery之Ajax知识解析
- [jQuery知识]jQuery之知识八-事件对象
- 深度学习数据集下载
- js-grid实现模糊查询
- [jQuery知识]jQuery之知识九-事件高级
- App后台开发运维和架构实践学习总结(7)——RESTful API 设计规范
- [jQuery知识]jQuery之知识十-动画初级
- C语言学习之1(Microsoft Visual Studio即VC6软件的安装及hello world 简单例子编写)
- [jQuery知识]jQuery之知识十一-动画高级
- Java搞基IO流的基础二三事之二
- 护照阅读机出入境运用SDK
- [jQuery知识]jQuery之知识十二-Ajax初级
- POJ2531Network Saboteur
- 微软人脉应用获得Project NEON界面重大更新
- Scroller解析