JQuery动画

简介:

  .fadeOut()淡出动画、.fadeIn()淡入动画、 .fadeToggle()淡入淡出切换和淡入效果.fadeTo()

1   .fadeOut()淡出动画,淡出效果,内容隐藏,opacity是1到0

2   常见让元素在页面中不可见的方法有

  通过设置样式的display:none

  透明度的方法,设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果

3   fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果
4   所谓"淡出"隐藏的,元素是隐藏状态不对作任何改变,元素是可见的,则将其隐藏
5  通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数,这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化
6  字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400毫秒的延时

7   .fadeIn()淡入动画,淡入效果,内容显示,opacity是0到1

8  duration指定过渡动画运行多长时间(毫秒数),默认值为400,该参数也可以为字符串"fast"(=200)或"slow"(=600)

9  元素显示完毕后需要执行的函数,函数内的this指向当前DOM元素
10   .fadeIn()函数用于显示所有匹配的元素,并带有淡入的过渡动画效果
 
11  
淡入的动画原理,操作元素的不透明度从0%逐渐增加到100%
12   如果元素本身是可见的,不对其作任何改变。如果元素是隐藏的,则使其可见
13   .fadeToggle()淡入淡出切换,用于切换所有匹配的元素,并带有淡入/淡出的过渡动画效果
14   fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出),如果元素当前是隐藏的,则使其显示(淡入),隐藏的元素不会被完全显示(不再影响页面的布局)
15   .fadeToggle()可以在.fadeIn()和.fadeOut()之间进行切换,如果元素已经淡出,则.fadeToggle()会向元素添加淡入效果,如果元素已经淡入,则.fadeToggle()会向元素添加淡出效果

16   语法.fadeTo( duration, opacity ,callback)必需的 duration参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒,fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间),可选的 callback 参数是该函数完成后所执行的函数名称



本文转自 拉考的考拉 51CTO博客,原文链接:
http://blog.51cto.com/lakaodekaola/2082408

相关文章
N..
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
226 1
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
9月前
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
|
11月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
190 22
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
174 0
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
200 55
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
333 9
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
160 1
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
138 0
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
117 4