文档章节

jQuery 效果 - 淡入淡出

Alexander丶Apc
 Alexander丶Apc
发布于 2015/03/26 18:04
字数 532
阅读 16
收藏 0
点赞 0
评论 0

jQuery Fading 方法


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

jQuery 拥有下面四种 fade 方法:

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

jQuery fadeIn() 方法

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

语法:

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

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

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

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

实例1

$("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() 方法:

实例2

$("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() 方法:

实例3

$("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() 方法:

实例4

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

© 著作权归作者所有

共有 人打赏支持
Alexander丶Apc
粉丝 1
博文 12
码字总数 4593
作品 0
武汉
程序员
8种Javascript过渡特效

看过很多后,本人觉得jQuery scrollable 在其中算很优秀的。 以下转自:http://paranimage.com/8-kinds-of-transition-effects-javascript/ 8种JavaScript 过渡特效 , 涵盖淡入淡出、翻转特...

晨曦之光
2012/03/09
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu
06/18
0
0
Jquery工作常用实例——淡入淡出功能实现

首先说下几个事件的用法: 1:$(selector).fadeOut(speed,callback)):淡出被选元素; 2:$(selector).fadeIn(speed,callback): 淡入被选元素; 3:$(selector).fadeTo(speed,opacity(亮度)...

Adam-Lee
2011/07/12
0
0
jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge
05/19
0
0
jQuery常用知识点总结以及平时封装常用函数

jquery效果 隐藏/显示: 淡入/淡出: 滑动:slideDown/slideUp(speed,callback) 动画: jQuery DOM 获取文本值、属性值: js代码: 设置文本属性值: js代码: 添加元素: 删除元素: 查找元...

heartless01
2017/10/31
0
0
Jquery Slides1.1.8版本注释

图片轮播图的应用很广泛,jquery Slides是一个很好的插件,它兼容所有的浏览器,使用起来很方便。缺点就是需要依赖于jquery。根据个人的使用情况,对调用Slides的参数进行中文注释,希望对一...

anx
2012/08/09
0
0
让人期待的2011年度最佳 jQuery 插件发布啦

  近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架。jQuery 的易扩展性吸引了来自全...

Yamazaki
2012/05/02
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
Jquery效果 首页banner轮播(2) 滚动轮播

上午写了一个很小的banner效果后,发现现在都不流行淡入淡出的轮播效果了,呵呵,下午花了点时间写了个滚动的轮播,感觉代码不整洁,所以不怎么专业,也是一个很小的东西,先放着这里接受点评...

Rella蕾拉
2012/03/01
0
0
jQuery 跟随浏览器窗口的回到顶部按钮

上周花了点时间改了一下 Go Top 按钮的显示效果, 显示在页面右侧, 跟随浏览器窗口滚动, 在 IE6 浏览器中使用淡入淡出的跟随显示. 可能现在已经存在很多类似的插件和工具, 但我还是想分享一下...

christina_12345
2014/03/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

数据结构与算法2

一个数组的例子,实现查找,显示和删除的功能。 public class array {public static void main(String[] args){long[] arr;arr = new long[100];int nElems = 0;int j;...

沉迷于编程的小菜菜
12分钟前
0
0
Python3 基于 requests 批量下载图片

Python3 基于 requests 批量下载图片 import requestsheaders = {'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8','Accept-Encod......

leeyi
13分钟前
0
0
Sparkstreaming and Kafka

简介 Kafka 0.10的Spark Streaming集成设计与0.8 Direct Stream方法类似。 它提供了简单的并行性,Kafka分区和Spark分区之间的1:1对应关系,以及对偏移量和元数据的访问。 但是,由于较新的...

刺猬一号
17分钟前
0
0
java获取当前时间所在一周的周一和周日日期

/** * 当前时间所在一周的周一和周日时间 * @param time 当前时间 * @return */ public static Map getWeekDate(String time) { Map map = new HashedMap(); SimpleDateFormat sdf = new Si......

小弱鸡
45分钟前
0
0
Redis数据的导出和导入(dump和load方式)

网上有些文章已经不再适用,本人也是踩了些坑,在此记录下。 迁移redis数据一般有如下3种方式: 第三方工具redis-dump,redis-load aof机制,需要开启aof功能 rdb存储机制 这里介绍第一种方式...

iplusx
50分钟前
1
0
ElasticSearch 高亮显示大文档搜索结果

2016年12月,我们开始研究Ambar——一个文档搜索系统。Ambar使用ElasticSearch作为核心搜索引擎。 在Ambar开发的过程中,我们处理了很多与ES相关的问题,我们想分享我们得到的宝贵经验。让我...

九州暮云
今天
1
0
Python 使用 pywifi 模块 破解wifi密码

git https://github.com/awkman/pywifi 常见常量 from pywifi import const# Define interface status.IFACE_DISCONNECTED = 0IFACE_SCANNING = 1IFACE_INACTIVE = 2IFACE_CONNEC......

阿豪boy
今天
2
0
phpstorm使用Iedis

phpstorm的redis插件Iedis是真好用 看了网上挺多的文章,但是由于我系统还是ubuntu,就有点尴尬了,现在破解之后,留个笔记,即使自己之后有需要也可以很快翻阅 先下载资源 资源下载 zip压缩...

贤郎--均灵
今天
0
0
第三章 spring-bean之FactoryBeanRegistrySupport(4)

前言 从FactoryBeanRegistrySupport类的名字可以看出FactoryBeanRegistrySupport负责FactoryBean的注册与支持。如果想知道FactoryBean相关的资料,请阅读spring-bean中关于FactoryBean的解读...

鸟菜啊
今天
0
0
CentOS “Destination Host Unreachable”问题解决办法

挑战极速安装CentOS时遇到局域网主机不能通信的情况: [root@zjd network-scripts]# ping 8.8.8.8PING 8.8.8.8 (8.8.8.8) 56(84) bytes of data.64 bytes from 8.8.8.8: icmp_seq=1 ttl=......

wffger
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部