0

0

jQuery中如何实现淡入淡出效果

清浅

清浅

发布时间:2019-02-12 14:26:01

|

4005人浏览过

|

来源于php中文网

原创

jquery中有四种方法分别为fadein()、fadeout()、fadetoggle()、fadeto(),通过这四种方法可以实现淡入淡出的效果

今天要分享的是如何通过jQuery来实现淡入淡出的效果,具有一定的参考作用,希望对大家有所帮助

jQuery中如何实现淡入淡出效果

【教程推荐:jQuery教程

jQuery具有四种fade方法,分别是fadeIn()、fadeOut()、fadeToggle()、fadeTo()接下来在文章中将为大家具体介绍这几种方法如何实现淡入淡出效果

fadeIn()方法

主要用于淡入已隐藏的元素,它有两个参数分别为:

speed :表示效果的时长,可取“slow" ,"fast”或者是自定义的时间值。它是可选参数

callback :表示淡入效果完成后所执行的函数名称

fadeOut() 方法

主要用于淡出可见元素,它的参数值与fadeIn的值一样

fadeToggle() 方法

这个方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

PHP5 和 MySQL 圣经
PHP5 和 MySQL 圣经

本书是全面讲述PHP与MySQL的经典之作,书中不但全面介绍了两种技术的核心特性,还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性,书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验,可用于解决开发者在实际中所面临的各种挑战。

下载

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

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

fadeTo() 方法

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

fadeTo方法中除了包含speed和callback函数以外,还多了一个必需的 opacity 参数,目的在于将淡入淡出效果设置不透明度

实例分享:




  
  Document
  


  
  

jQuery中如何实现淡入淡出效果

效果图:

GIF.gif

总结:以上就是本篇文章的全部内容了,希望通过这篇文章可以帮助大家学会如何通过jQuery来实现淡入淡出效果

注:本篇文章参考jQuery教程手册中的jQuery淡入淡出一节

相关专题

更多
ip地址修改教程大全
ip地址修改教程大全

本专题整合了ip地址修改教程大全,阅读下面的文章自行寻找合适的解决教程。

33

2025.12.26

压缩文件加密教程汇总
压缩文件加密教程汇总

本专题整合了压缩文件加密教程,阅读专题下面的文章了解更多详细教程。

18

2025.12.26

wifi无ip分配
wifi无ip分配

本专题整合了wifi无ip分配相关教程,阅读专题下面的文章了解更多详细教程。

46

2025.12.26

漫蛙漫画入口网址
漫蛙漫画入口网址

本专题整合了漫蛙入口网址大全,阅读下面的文章领取更多入口。

91

2025.12.26

b站看视频入口合集
b站看视频入口合集

本专题整合了b站哔哩哔哩相关入口合集,阅读下面的文章查看更多入口。

283

2025.12.26

俄罗斯搜索引擎yandex入口汇总
俄罗斯搜索引擎yandex入口汇总

本专题整合了俄罗斯搜索引擎yandex相关入口合集,阅读下面的文章查看更多入口。

370

2025.12.26

虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

35

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

25

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

72

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
微信小程序开发之API篇
微信小程序开发之API篇

共15课时 | 1.2万人学习

Webpack4.x---十天技能课堂
Webpack4.x---十天技能课堂

共20课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号