`
单刀刑天
  • 浏览: 40149 次
文章分类
社区版块
存档分类
最新评论

jQuery 效果 - 淡入淡出

阅读更多

实例

使用淡入效果来显示一个隐藏的 <p> 元素:

$(".btn2").click(function(){
  $("p").fadeIn();
});

亲自试一试

定义和用法

fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。

语法

$(selector).fadeIn(speed,callback)
参数 描述
speed

可选。规定元素从隐藏到可见的速度。默认为 "normal"。

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"

在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其透明度(这样会创造淡入效果)。

callback

可选。fadeIn 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

提示和注释

提示:如果元素已经显示,则该效果不产生任何变化,除非规定了 callback 函数。

注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

亲自试一试 - 实例

使用 speed 参数
使用 speed 参数来对淡入或淡出元素。
分享到:
评论

相关推荐

    jQuery首页轮播-淡入淡出效果

    jQuery作为一种强大的JavaScript库,提供了丰富的功能来实现动态效果,如首页轮播的淡入淡出效果。这种效果可以使得页面更加生动,提升用户体验。接下来,我们将深入探讨如何使用jQuery实现这种效果。 首先,我们...

    jQuery超酷文字淡入淡出显示特效

    在本案例中,jQuery是实现文字淡入淡出效果的基础,通过其强大的API和丰富的插件生态系统,开发者可以轻松地添加复杂的动态效果到网页中。 reveal-it.js插件则是这个特效的核心。它专门设计用来让文字以平滑的淡入...

    jQuery图片自动淡入淡出插件

    能让任意列表形式的内容依次淡入淡出切换显示,或是上下切换显示。内容可以是文字,图片等。支持各式标签,列表标签ul,li或是div,p标签都可以。 可以非常轻松的实现诸如新闻或公告内容的自动随机切换显示,或是...

    jQuery放大缩小淡入淡出焦点图特效.zip

    "淡入淡出"效果则依赖于jQuery的动画方法,如`.fadeIn()`和`.fadeOut()`。这两个方法会改变元素的不透明度,从而实现渐显和渐隐的视觉效果。在这个焦点图特效中,它们使得图片在切换时平滑过渡,增强了用户体验。 ...

    Jquery淡入淡出幻灯片特效图片切换源码下载

    总的来说,"Jquery淡入淡出幻灯片特效图片切换"源码是利用jQuery的动画特性,结合定时器实现的一种常见网页动态效果。这种效果不仅美观,还能提升网站的吸引力和用户体验。学习和理解这种代码,对于提升前端开发技能...

    jquery实现窗体淡入淡出效果

    本教程将详细讲解如何利用jQuery实现窗体的淡入淡出效果,以及如何使div层随鼠标移动,适用于创建动态且吸引人的商品信息展示。 首先,你需要在HTML文件中引入jQuery库。这通常通过CDN链接或者本地文件来完成。例如...

    JQuery淡入淡出自动切换图片特效

    总的来说,"JQuery淡入淡出自动切换图片特效"是一个实用的网页设计技巧,通过结合jQuery的动画方法和JavaScript的定时器,我们可以创建出富有动态感的图片展示效果。对于前端开发者来说,掌握这种技术不仅可以提升...

    jQuery淡入淡出瀑布流效果.zip

    《jQuery淡入淡出瀑布流效果的实现与应用》 在网页设计中,动态效果的运用可以极大地提升用户体验,使得网站或应用更具吸引力。其中,jQuery的淡入淡出瀑布流效果是一种常见的视觉表现手法,它结合了瀑布流布局的...

    jQuery左右淡入淡出切换幻灯片.zip

    《jQuery左右淡入淡出切换幻灯片:打造高效轻量级网页动态效果》 在网页设计中,焦点图和幻灯片是不可或缺的元素,它们能够吸引用户的注意力,展示重要信息,提升用户体验。今天我们将深入探讨一款名为“jQuery左右...

    轮播图(淡入淡出效果).rar

    例如,jQuery的`.fadeIn()`和`.fadeOut()`方法可以轻松实现淡入淡出效果。 7. **响应式设计** 当前的轮播图可能还考虑了响应式设计,以适应不同设备和屏幕尺寸。通过使用媒体查询(Media Queries)和百分比布局,...

    jquery点击图片淡入淡出切换代码

    "jQuery点击图片淡入淡出切换代码"是一个实现这种效果的解决方案,它利用JavaScript库jQuery的强大功能,为图片展示添加了专业的动画效果。这个功能使得图片在用户的交互下能够平滑地淡入淡出,提供了一种优雅的图片...

    jQuery实用淡入淡出幻灯片.zip

    jQuery淡入淡出幻灯片主要依赖于jQuery库的动画功能,特别是`.fadeIn()`和`.fadeOut()`两个方法。这两个方法分别用于元素的渐显和渐隐,通过控制透明度来实现平滑的过渡效果。当一个幻灯片元素淡出时,另一个元素会...

    jquery 左右淡入淡出滑动

    本教程将深入讲解如何使用jQuery来实现一个左右淡入淡出滑动的效果,这种效果通常用于创建引人注目的提示信息或者新闻滚动展示。 首先,我们需要在HTML页面中引入jQuery库。如果还没有引入,可以通过以下方式添加...

    JQuery MX-9

    3. **动态效果创建**:通过插件,开发者可以直接在Dreamweaver中创建和编辑jQuery动画,如淡入淡出、滑动等效果。 4. **DOM操作**:提供对HTML元素的简便操作,如选择、添加、删除、修改等,简化DOM操作流程。 5. ...

    jQuery实现淡入淡出效果

    用fadeIn、fadeOut、fadeToggle来实现淡入淡出。

    jQuery 3D边框效果的淡入淡出焦点图特效代码.rar

    "jQuery 3D边框效果的淡入淡出焦点图特效代码"是一个针对网页开发者的资源,它利用jQuery库实现了一种独特且引人注目的视觉效果。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等功能,...

    jquery图片淡入淡出切换特效.zip

    本示例中的"jquery图片淡入淡出切换特效.zip"是一个基于jQuery实现的图片轮播效果,它为网页设计提供了一种吸引用户的动态视觉体验。这种特效通常用于网站的图片展示,如产品相册、幻灯片或背景轮播等场景。 jQuery...

    jquery插件jquery-ui-1.8.2.custom.min.js

    Effects则提供了各种动画效果,如Fade(淡入淡出)、Slide(滑动)等。Position模块提供了元素相对定位的功能,而Utilities则是各种实用函数的集合,为开发带来便利。 在使用"jquery-ui-1.8.2.custom.min.js"之前,...

    jQuery图像悬停淡入淡出特效

    标题中的"jQuery图像悬停淡入淡出特效"指的是使用jQuery来实现的一种交互式图像展示功能,当鼠标指针悬停在图像上时,图像会进行淡入淡出的动画效果,提升用户体验。 这种特效通常应用于网站的相册展示、产品图片...

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    5. **动画效果**:解释如何利用jQuery UI的内置动画效果,如淡入淡出(Fade)、滑动(Slide)等,增强用户体验。 6. **无障碍性**:讨论如何确保jQuery UI组件符合无障碍性标准,使所有用户都能方便地使用。 7. **...

Global site tag (gtag.js) - Google Analytics