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. 日本DARTS 支撑的一系列应用项目

    DARTS是多学科空间科学数据平台,例如天体物理.太阳物理.太阳物理.月球与行星科学和微重力科学.在此数据支撑下,有许多应用. 1.http://wms.selene.darts.isas.jaxa. ...

  2. ThrottleAttribute

    /// <summary> /// Decorates any MVC route that needs to have client requests limited by time. ...

  3. 高质量C++/C编程指南(林锐)

    推荐-高质量C++/C编程指南(林锐) 版本/状态 作者 参与者 起止日期 备注 V 0.9 草稿文件 林锐   2001-7-1至 2001-7-18 林锐起草 V 1.0 正式文件 林锐   20 ...

  4. Ubuntu12.04安装到U盘里

    把linux安装到U盘里,随时随地使用自己的系统show一下不仅用起来顺手而且很方便携带.看了一些关于安装Ubuntu到U盘的资料,自己试着折腾了几次,并且成功安装了.花时间更新要保证系统是最新的就要 ...

  5. 关于MariaDB5.5不是有效的Win32 应用程序

    操作系统:Windows XP sp3 数据库:MariaDB 5.5.49 问题原因: 使用文本编辑器打开mysqld.pdb文件. 在13行1012列,会发现如下信息: 这说明v5.5.49是使用 ...

  6. Nopcommerce 二次开发2 WEB

    using System; using System.Collections.Generic; using System.Linq; using System.ServiceModel.Syndica ...

  7. Node Server管理

    停止服务 Ctrl+Z暂停 Ctrl+C: kill it 先找到process ID (second from the left), 再kill it:$ ps axu | grep node$ k ...

  8. java.map使用

    Map以按键/数值对的形式存储数据,和数组非常相似,在数组中存在的索引,它们本身也是对象.       Map的接口       Map---实现Map       Map.Entry--Map的内部 ...

  9. 习课的redis配置记录

    <!-- redis begin --> <dependency> <groupId>redis.clients</groupId> <artif ...

  10. 所有古诗词的api

    服务商:api.getlove.cn 分类:诗词 更新时间:2016-03 如果接口不满足您的要求,您可以联系qq:2265658022购买完整的数据库 免费apikey:56eab527a0facb ...