JQuery动画

最新推荐文章于 2025-09-10 14:53:18 发布

转载最新推荐文章于 2025-09-10 14:53:18 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/520670

文章标签：

#javascript #ViewUI

本文详细介绍了jQuery中淡入淡出动画的四种方法：.fadeOut()、.fadeIn()、.fadeToggle()和.fadeTo()。包括它们的功能、用法及参数说明。.fadeOut()用于元素淡出并隐藏，.fadeIn()使隐藏的元素淡入显示，.fadeToggle()可在二者间切换，.fadeTo()则允许精确控制元素的透明度。

.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