博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 效果 - 淡入淡出
阅读量:4654 次
发布时间:2019-06-09

本文共 1708 字,大约阅读时间需要 5 分钟。

通过 jQuery,您可以实现元素的淡入淡出效果。


 

jQuery Fading 方法

通过 jQuery,您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

 

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法:

实例

演示带有不同参数的 fadeIn() 方法。

查看结果:


 

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法:

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法:

实例

1  2  3  4  5 14 15 16 17 

演示带有不同参数的 fadeOut() 方法。

18 19
20
21
22
23
24
25 26 27
View Code

查看结果:

点击淡出之后图片正在渐渐消失:


 

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法:

实例

1  2  3  4  5 14 15 16 17 18 

演示带有不同参数的 fadeToggle() 方法。

19 20
21
22
23
24
25
26 27 28 29
View Code

查看结果:

默认状态:                          点击之后:        

 

再次点击出现:


 

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

语法:

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法:

实例

1  2  3  4  5 14 15 16 17 18 

演示带有不同参数的 fadeTo() 方法。

19 20
21
22
23
24
25
26 27 28
View Code

查看结果:


 

转载于:https://www.cnblogs.com/sihuiming/p/5336390.html

你可能感兴趣的文章
sgu175---pascal
查看>>
HDU-5536 Chip Factory (字典树)
查看>>
重点错误记录
查看>>
IDEA kotlin 配置
查看>>
关于es6中let的相关问题
查看>>
vue学习:props,scope,slot,ref,is,slot,sync等知识点
查看>>
sass判断语句
查看>>
MYSQL查看当前正在使用的数据库命令
查看>>
Java通过MouseInfo获取鼠标位置
查看>>
win10升级至专业版
查看>>
SpringBoot入门篇--整合mybatis+generator自动生成代码+druid连接池+PageHelper分页插件+SpringBoot整合Mybatis-plus...
查看>>
秒杀系统架构分析与实战
查看>>
大数据概述
查看>>
windbg cs
查看>>
maven配置【转载】
查看>>
洛谷—— P1080 国王游戏
查看>>
Django框架介绍
查看>>
居中问题(水平居中和垂直居中)
查看>>
二叉查找树的实现
查看>>
关于cshtml中的js对动态编译支持的问题
查看>>