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

点击展示 淡入/淡出 面板


实例

jQuery fadeIn()
演示 jQuery fadeIn() 方法。

jQuery fadeOut()
演示 jQuery fadeOut() 方法。

jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。

jQuery fadeTo()
演示 jQuery fadeTo() 方法。


jQuery Fading 方法

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

jQuery 拥有下面四种 fade 方法:

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

jQuery fadeIn() 方法

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

语法:

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

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

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

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

实例

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

尝试一下 »


jQuery fadeOut() 方法

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

语法:

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

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

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

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

实例

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

尝试一下 »


jQuery fadeToggle() 方法

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

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

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

语法:

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

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

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

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

实例

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

尝试一下 »


jQuery fadeTo() 方法

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

语法:

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

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

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

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

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

实例

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

尝试一下 »

jQuery 效果 - 淡入淡出的更多相关文章

  1. JQuery效果-淡入淡出、滑动、动画

    一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入                       对应也有$(selector).fadeIn(speed, ...

  2. jQuery 效果 – 淡入淡出

    在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...

  3. 松软科技课堂:jQuery 效果 - 淡入淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  4. jQuery效果-淡入淡出

    本文实现一个控制出现.消失.透明度的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  5. 利用jQuery的淡入淡出实现轮播器

    基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...

  6. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  7. 利用jquery的淡入淡出函数(fadeIn和fadeOut)--实现轮播

    首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码 ...

  8. jQuery效果--淡入和淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  9. 11.jQuery之淡入淡出效果

    知识点:fadeIn   fadeOut  fadeToggle  fadeTo <style> div { width: 150px; height: 300px; background ...

随机推荐

  1. ping详解

    Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试”. ...

  2. 支付宝APP支付Java回调具体步骤

    /** * 支付宝异步请求通知 * * @param request * @return */@RequestMapping(value = "async", method = R ...

  3. ♫【模式】Curry化

    /** * 当发现正在调用同一个函数,并且传递的参数绝大多数都是相同的, * 那么该函数可能是用于Curry化的一个很好的候选参数 */ ;(function() { function add(x, ...

  4. Android Fragment实现分屏

    在项目中碰到一个问题,新开发一个平板APP,项目要求是把原来的一个手机端APP放在项目左侧显示,右侧添加新加的功能. 首先想到了Fragment,以前做过Fragment的一些简单的Demo,但是都没 ...

  5. LR报-27727错误解决办法

    1.报如下错误:Action.c(4):Error-27727:Step download timeout(120 seconds) has expired when downloading reso ...

  6. Unity3d 屏幕空间人体皮肤知觉渲染&次表面散射Screen-Space Perceptual Rendering & Subsurface Scattering of Human Skin

    之前的人皮渲染相关 前篇1:unity3d Human skin real time rendering 真实模拟人皮实时渲染 前篇2:unity3d Human skin real time ren ...

  7. 在Ant Build文件中使用正则表达式替换文件内容

    这需要在build文件中使用<replaceregexp>标签, 这个标签的使用大概是这个样子的: <replaceregexp file="${src}/build.pr ...

  8. openstack grizzly版network网络节点安装

    版本以及源的配置和控制节点一致 1.安装完操作系统已经apt源配置完成之后,一定要执行 apt-get update root@cloud:~# mv /etc/apt/sources.list /e ...

  9. MySQL生僻字(不常用字)的完整解决方案

    查看 MySQL 数据库服务器和数据库字符集 show variables like '%char%'; 查看 MySQL 数据表(table) 的字符集 show table status from ...

  10. 362. Design Hit Counter

    这个傻逼题..我没弄明白 you may assume that calls are being made to the system in chronological order (ie, the ...