- 浏览: 13641224 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00), 下面使用时请考虑浮点精确表达差值.
参数说明:
fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo()), 0~100的正整数值, 也是可选参数.
核心代码及演示: 查看样例演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>原生JS实现淡入淡出效果</title> <style> /*demo css*/ #demo div.box {float:left;width:31%;margin:0 1%} #demo div.box h2{margin-bottom:10px} #demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder} #demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden} </style> <script> /** * @author Mr.Think * @author blog http://mrthink.net/ * @2011.01.27 * 可自由转载及使用,但请注明版权归属 */ window.onload = function(){ //底层共用 var iBase = { Id: function(name){ return document.getElementById(name); }, //设置元素透明度,透明度值按IE规则计,即0~100 SetOpacity: function(ev, v){ ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100; } } //淡入效果(含淡入到指定透明度) function fadeIn(elem, speed, opacity){ /* * 参数说明 * elem==>需要淡入的元素 * speed==>淡入速度,正整数(可选) * opacity==>淡入到指定的透明度,0~100(可选) */ speed = speed || 20; opacity = opacity || 100; //显示元素,并将元素值为0透明度(不可见) elem.style.display = 'block'; iBase.SetOpacity(elem, 0); //初始化透明度变化值为0 var val = 0; //循环将透明值以5递增,即淡入效果 (function(){ iBase.SetOpacity(elem, val); val += 5; if (val <= opacity) { setTimeout(arguments.callee, speed) } })(); } //淡出效果(含淡出到指定透明度) function fadeOut(elem, speed, opacity){ /* * 参数说明 * elem==>需要淡入的元素 * speed==>淡入速度,正整数(可选) * opacity==>淡入到指定的透明度,0~100(可选) */ speed = speed || 20; opacity = opacity || 0; //初始化透明度变化值为0 var val = 100; //循环将透明值以5递减,即淡出效果 (function(){ iBase.SetOpacity(elem, val); val -= 5; if (val >= opacity) { setTimeout(arguments.callee, speed); }else if (val < 0) { //元素透明度为0后隐藏元素 elem.style.display = 'none'; } })(); } var btns = iBase.Id('demo').getElementsByTagName('input'); btns[0].onclick = function(){ fadeIn(iBase.Id('fadeIn')); } btns[1].onclick = function(){ fadeOut(iBase.Id('fadeOut'),40); } btns[2].onclick = function(){ fadeOut(iBase.Id('fadeTo'), 20, 10); } } </script> </head> <body> <!--DEMO start--> <div id="demo"> <div class="box"> <h2><input type="button" value="点击淡入" /></h2> <div id="fadeIn" style="display:none"> <p>Name:Mr.Think</p> <p>Blog:http://mrthink.net</p> <p>Date:2011.01.27</p> </div> <p>欲求文明之幸福,不得不经文明之痛苦.</p> </div> <div class="box"> <h2><input type="button" value="点击淡出" /></h2> <div id="fadeOut"> <p>Name:Mr.Think</p> <p>Blog:http://mrthink.net</p> <p>Date:2011.01.27</p> </div> <p>欲求文明之幸福,不得不经文明之痛苦.</p> </div> <div class="box"> <h2><input type="button" value="点击淡出至指定透明度" /></h2> <div id="fadeTo"> <p>Name:Mr.Think</p> <p>Blog:http://mrthink.net</p> <p>Date:2011.01.27</p> </div> <p>欲求文明之幸福,不得不经文明之痛苦.</p> </div> </div> <!--DEMO end--> </body> </html>
来源:http://mrthink.net/js-fadein-fadeout-fadeto/
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1184使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2266当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1176参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1017在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 947从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1553先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3304每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1205原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4463出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1342一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1560一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 826域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2279代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 718代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1594插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 504上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1183javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3575寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1104AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 696AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装,有用得着的朋友,可以直接使用。代码中另附有一个设置元素透明度的方法, ...
主要介绍了jQuery 淡入/淡出效果函数用法,结合实例形式分析了jQuery 淡入/淡出功能fadeIn()、fadeOut()、fadeToggle()及fadeTo()函数基本功能、使用方法与操作注意事项,需要的朋友可以参考下
jPlayer Sound Fade 插件版本:1.0一个简单的插件,使用fadeTo/fadeIn/fadeOut 方法扩展jPlayer 对象来控制声音。要求jQuery jPlayer 2.1.0+用法查看
- 淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)与渐变指定透明度(fadeTo)--淡入淡出动画组。 1、三组基本动画 $(selector).函数([speed], [callback]); // speed(可选):动画的执行时间 // 1.如果不传,就没有...
5.3.2 fadeTo()方法/137 5.4 自定义动画/139 5.4.1 简单的动画/140 5.4.2 移动位置的动画/141 5.4.3 队列中的动画/144 5.4.4 动画停止和延时/146 5.5 动画效果综述/148 5.5.1 各种动画方法说明/148 5.5.2 ...
jquery淡入淡出演示 感觉用法都差不多,目前看来还比较简单。 fadeIn fadeOut fadeToggle fadeTo 一共4种用法 CSS代码 <style> div{background-color:#eaeaea;border:solid 1px #999999;width:100px;height...
fadeTo(2000,0.3)将图片显示到透明度为30%的程度 滑动显示 slideDown(): slideUp(): slideToggle(): 都可以传入一个speed参数。 $(‘:animated’);获取正在执行动画的元素。 将正在执行动画的元素停止: $(...
演示简单的 jQuery fadeTo() 函数。 <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(...
5.1.2 动画效果的show()与hide()方法 5.1.3 toggle()方法 5.2 滑动 5.2.1 slidedown()与slideup方法 5.2.2 slidetoggle()方法 5.3 淡入淡出 5.3.1 fadein()与fadeout()方法 5.3.2 fade...
fadeTo(speed, opacity, [fn]) 自定义 animate(param,[dur],[e],[fn]) animate(params, options) stop([clearQueue], [gotoEnd]) 设置 jQuery.fx.off Ajax Ajax 请求 $.ajax([options]) load(url, [data], ...
fadeTo(speed, opacity, [fn]) 自定义 animate(param,[dur],[e],[fn]) animate(params, options) stop([clearQueue], [gotoEnd]) 设置 jQuery.fx.off Ajax Ajax 请求 $.ajax([options]) load(url, [data], ...
) 淡入淡出 fadeIn(speed, [callback]) fadeOut(speed, [callback]) fadeTo(speed, opacity, [fn]) 自定义 animate(param,[dur],[e],[fn]) animate(params, options) stop([clearQueue], [gotoEnd]) delay(duration,...
fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) 自定义 animate(p,[s],[e],[fn])1.8* stop([c],[j])1.7* delay(d,[q]) finish([queue])1.9+ 设置 jQuery.fx.off jQuery.fx.interval ajax ajax ...
9.3.3 fadeTo(speed, opacity, [callback]) 154 9.4 自定义 155 9.4.1 animate(params, [duration], [easing], [callback]) 155 9.4.2 animate(params, options) 157 9.4.3 stop([clearQueue], [gotoEnd]) 160 9.4.4...