fade方法包括四个:

(1)fadeIn(speed,callback):淡入的方法,speed代表淡入的速度,可以是slow,fast,毫秒,不填等

例如:

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

(2)fadeOut(speed,callback)方法:淡出的方法,参数的意义如上。

例如:

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

(3)fadeToggle(speed,callback)方法:可以同时切换淡入淡出。

例如:

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

(4)fadeTo(speed,opacity,callback)方法:允许渐变为给定的不透明度(值介于 0 与 1 之间),相当于不是淡入或者淡出完全不见,而是淡出到一个程度,有了一个透明度。

例如:

$("button").click(function(){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

});

jquery实现淡入淡出的更多相关文章

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

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

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

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

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

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

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

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

  5. jQuery 效果 - 淡入淡出

    通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...

  6. jQuery 效果 – 淡入淡出

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

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

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

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

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

  9. jQuery 标签淡入淡出 个人随笔

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. PHP基础知识2

    1.运算符 1.运算符简单来说就是用来连接各个常量.变量以及函数和其他表达式参与运算的符号! 2.运算符的优先级 2.流程控制 1.流程控制,就是指程序执行的"路线",一般是用相关 ...

  2. 使用delphi+intraweb进行微信开发5—准备实现微信API,先从获取AccessToken开始

    在前4讲中我们已经使iw开发的应用成功和微信进行了对接,再接下来的章节中我们开始逐一尝试和实现微信的各个API,开始前先来点准备工作 首先需要明确的是,微信的API都是通过https调用实现的,分为p ...

  3. Maven基础笔记,原理

    1.什么是Maven ①Maven是一款实现自动化构建的工具软件. ②构建:从源程序→程序的执行 清理→编译→测试→报告→打包→部署→执行 ③构建工具:Make→Ant→Maven→Gradle... ...

  4. delphi dev 汉化

    //把以下文件复制到记事本中,并保存为DevChs.ini放在exe的目录下 //有这个cxLocalizer控件 //主窗体创建的时候 if (fileexists(ExtractFilePath( ...

  5. 将Web站点由IIS6迁移至IIS7

    最近开始着手逐步将所有的Web站点由Win2003+IIS6迁移至64位Win2008+IIS7,基本还算顺利.这里就把相关内容整理总结一下.首先自然是要安装基本运行环境,包括iis,.net fra ...

  6. Replication

    Peer-to-peer replication: http://msdn.microsoft.com/en-us/library/ms151196(v=sql.120).aspx Merge rep ...

  7. Nopcommerce 二次开发0

    Nopcommerce  是国外的一个高质量的开源b2c网站系统,基于EntityFramework6.0和MVC5.0,使用Razor模板引擎,有很强的插件机制,包括支付配送功能都是通过插件来实现的 ...

  8. [转载] COM 套间

    http://www.vckbase.com/index.php/wv/1315 简序 大学毕业前的最后一学期,在一家公司实习,当时的工作需要用到一些操作系统提供的组件.那时候只知道COM这个名词,并 ...

  9. c#查找string数组的某一个值的索引

    string[] array = { "A","B","C","D","H"};   var ind ...

  10. java使用jsch连接linux

    由于项目需要使用java来linux进行管理,近一番查找,发现第三方jar包 jsch 可以轻松实现对linux的管理,(相关文档及例子请访问官网www.jcraft.com),故引进. 在网上搜索了 ...