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面向对象编程——深入理解方法重载与方法覆盖(多态)

    什么是多态? 多态(Polymorphism)按字面的意思就是“多种状态”.在面向对象语言中,接口的多种不同的实现方式即为多态.引用Charlie Calverts对多态的描述——多态性是允许你将父对 ...

  2. 02-C#入门(枚举、结构等)

    不要为了写笔记而学习!!! 其实学完一章再返回复习,然后做笔记,真的很费时间(电子书还不方便).当然,复习带来的价值,是值得花时间的. 枚举.结构 枚举的类型有限(short.byte...)且是相同 ...

  3. TODO的使用

    在vs2012中使用TODO添加注释

  4. 为tomcat动态添加jndi数据源信息

    我们在开发项目的时候,总要和数据库打交道,如何获取数据源,以什么样的方式来获取,成为了我们即简单又熟悉而且不得不注意的一个问题. 那么在这里我说三种获取数据源的常用方式: 一.通过配置文件来获取 首先 ...

  5. EF4.1使用

    EF分为三类: db first:首先建立数据库,然后通过ADO.Net Entity Data Model项目建立.edmx文件,这是一个xml文件主要作用就是映射类和数据表 model first ...

  6. Runtime的几个小例子(含Demo)

    一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.)           1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数);  [runti ...

  7. GCD、dispatch函数介绍

    iOS多线程的方法有3种: NSThread NSOperation GCD(Grand Central Dispatch) 其中,由苹果所倡导的为多核的并行运算提出的解决方案:GCD能够访问线程池, ...

  8. Log4net 记录日志

    配置文件 备注,需要放到根目录下面 <?xml version="1.0" encoding="utf-8"?> <configuration ...

  9. Xcode插件安装

    使用Xcode开发中,经常使用到各种插件,可以大大提高工作效率,我一般使用Alcatraz工具安装插件,下面介绍一下插件的安装步骤. 1.通过一下命令安装: mkdir -p ~/Library/Ap ...

  10. JS中Array详细用法

    1.数组的创建 var name= new Array(); //创建一个数组 name[0]="zhangsan";   //给数组赋值 name[1]="lisi&q ...