淡入淡出效果在日常项目中经常使用。不幸的是，本地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="https://www.tulingxueyuan.cn/d/file/p/20230506/ug3ubuasie4" xmlns:og="http://opengra图灵rotocol.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 p.box {float:left;width:31%;margin:0 1%}#demo p.box h2{margin-bottom:10px}#demo p.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}#demo p.box p{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden}</style><script>/** * @author Mr.Think * @author blog https://www.tulingxueyuan.cn/d/file/p/20230506/hkkqlsknwvw * @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--><p id="demo"><p class="box"><h2><input type="button" value=“点击淡入” /></h2><p id="fadeIn" style="display:none"><p>Name:Mr.Think</p><p>Blog:http://mrthink.net</p><p>Date:2011.01.27</p></p><p>渴望文明的幸福，必须经历文明的痛苦.</p></p><p class="box"><h2><input type="button" value=“点击淡出” /></h2><p id="fadeOut"><p>Name:Mr.Think</p><p>Blog:http://mrthink.net</p><p>Date:2011.01.27</p></p><p>渴望文明的幸福，必须经历文明的痛苦.</p></p><p class="box"><h2><input type="button" value=“点击淡出至指定透明度” /></h2><p id="fadeTo"><p>Name:Mr.Think</p><p>Blog:http://mrthink.net</p><p>Date:2011.01.27</p></p><p>渴望文明的幸福，必须经历文明的痛苦.</p></p></p><!--DEMO end--></body></html>
湘公网安备43019002002060