0

0

jQuery.fadeIn() 函数使用详解

巴扎黑

巴扎黑

发布时间:2017-06-30 10:14:14

|

2336人浏览过

|

来源于php中文网

原创

fadein()函数用于显示所有匹配的元素,并带有淡入的过渡动画效果。

淡入的动画效果,即元素的不透明度的比例从0%逐渐增加到100%。

如果元素本身是可见的,则不对其作任何改变。如果元素是隐藏的,则使其可见。

与该函数相对的是fadeOut()函数,用于隐藏所有匹配的元素,并带有淡出的过渡动画效果。

该函数属于jQuery对象(实例)。

语法

jQuery 1.0 新增该函数。fadeIn()函数主要有以下两种形式的用法:

用法一:jQuery 1.4.3 新增支持参数easing。

jQueryObject.fadeIn( [ duration ] [, easing ] [, complete ] )

用法二:

jQueryObject.fadeIn( options )

用法二是用法一的变体。以对象形式指定所需的选项参数(可指定比用法一更多的选项参数)。

参数

参数 描述

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

easing 可选/String类型指定使用何种动画效果,默认为"swing",还可以设为"linear"或其他自定义的动画样式的函数名称。

complete 可选/Function类型元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。

options Object类型指定的选项参数对象。

php商城系统
php商城系统

PHP商城系统是国内功能优秀的网上商城系统,同时也是一个商业的PHP开发框架,有多套免费模版,强大的后台管理功能,专业的网上商城系统解决方案,快速建设网上购物商城、数码商城、手机商城、办公用品商城等网站。 php商城系统v3.0 rc6升级 1、主要修复用户使用中出现的js未加载完报错问题,后台整改、以及后台栏目的全新部署、更利于用户体验。 2、扩展出,更多系统内部的功能,以便用户能够迅速找到需

下载

参数options对象可以识别如下的属性(以下属性均是可选的):

属性 属性描述

duration 参见参数duration。

easing 参见参数easing。

complete 参见参数complete。

queue Boolean类型指示是否将动画放入效果队列中,默认为true。从1.7版本开始,该参数可以为字符串,用于放入指定名称的效果队列。如果你指定的队列不会自动开始,你需要手动调用dequeue("queueName")来启动队列。

此外,jQuery 1.4 和 1.8 还为参数options新增了许多新的选项支持,但这些参数并不常用,此处不再赘述,详见jQuery官方文档。

返回值

fadeIn()函数的返回值为jQuery类型,返回当前jQuery对象本身。

示例&说明

请参考下面这段初始HTML代码:

CodePlayer

专注于编程开发技术分享

淡入的显示效果:

<select id="animation">
    <option value="1">fadeIn( )</option>
    <option value="2">fadeIn( "slow" )</option>
    <option value="3">fadeIn( 3000 )</option>
    <option value="4">fadeIn( 2000, complete )</option>
    <option value="5">fadeIn( 1000, "linear" )</option>
    <option value="6">fadeIn( options )</option>
</select>
<input id="btnFadeIn" type="button" value="显示" > <input id="btnHide" type="button" value="隐藏" >

以下是与fadeIn()函数相关的jQuery示例代码,以演示fadeIn()函数的具体用法:

//【显示】按钮
$("#btnFadeIn").click( function(){
    var v = $("#animation").val();
    if( v == "1" ){
        $("p").fadeIn( );       
    }else if(v == "2"){
        $("p").fadeIn( "slow" );    
    }else if(v == "3"){
        $("p").fadeIn( 3000 );  
    }else if(v == "4"){
        $("p").fadeIn( 2000, function(){
            alert("显示完毕!");
        } );    
    }else if(v == "5"){
        $("p").fadeIn( 1000, "linear" );    
    }else if(v == "6"){
        $("p").fadeIn( { duration: 1000 } );    
    }
} );
// 【隐藏】按钮
$("#btnHide").click( function(){
    $("p").hide( );
} );

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
苹果官网入口与在线访问指南_中国站点快速直达与iPhone查看方法
苹果官网入口与在线访问指南_中国站点快速直达与iPhone查看方法

本专题汇总苹果官网最新可用入口及中国站点访问方式,涵盖官网直达链接、iPhone官方页面查看方法与常见访问说明,帮助用户快速进入苹果官方网站,便捷了解产品信息与官方服务。

2

2026.02.24

Asianfanfics官网入口与访问指南_AFF官方平台最新登录地址
Asianfanfics官网入口与访问指南_AFF官方平台最新登录地址

本专题系统整理Asianfanfics(AFF)官方网站最新可用入口,涵盖官方平台最新直达地址、官网登录方式及中文访问指引,帮助用户快速、安全地进入AFF平台浏览与使用相关内容。

0

2026.02.24

Go分布式服务治理与链路追踪实践
Go分布式服务治理与链路追踪实践

本专题围绕 Go 语言在分布式系统中的服务治理实践展开,系统讲解服务注册与发现、配置中心、限流熔断、灰度发布以及分布式链路追踪方案。通过完整项目示例,帮助开发者构建可观测性完善、稳定性高、易扩展的 Go 微服务架构体系,提升线上系统问题定位与运维效率。

0

2026.02.24

Python自动化测试与持续集成实战
Python自动化测试与持续集成实战

本专题聚焦 Python 在自动化测试与持续集成中的工程化实践,系统讲解测试框架选型、测试用例设计、接口自动化、测试数据管理及测试报告生成。结合 CI/CD 流水线场景,讲解如何将自动化测试融入持续集成流程,实现代码提交即自动测试,提升项目交付质量与团队协作效率。

0

2026.02.24

Java高并发系统设计与性能调优
Java高并发系统设计与性能调优

本专题围绕 Java 在高并发业务场景下的系统设计与性能调优展开,系统讲解线程模型、并发容器、锁机制、异步编程及 JVM 性能调优思路。结合真实高并发业务场景,深入分析接口限流、线程池配置、热点资源优化与系统稳定性保障方案,帮助开发者构建高性能、高可用的 Java 后端系统。

3

2026.02.24

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

1250

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

402

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

252

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

39

2026.02.13

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Go 教程
Go 教程

共32课时 | 5.5万人学习

麻省理工大佬Python课程
麻省理工大佬Python课程

共34课时 | 5.4万人学习

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

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