转自http://kb.cnblogs.com/page/90854/
参数说明:
fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo()), 0~100的正整数值, 也是可选参数.
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 += 10;
if (val <= opacity+500) {
setTimeout(arguments.callee, speed);
}else{
fadeOut(iBase.Id(elem.id));
}
})();
}
//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
speed = speed || 20;
opacity = opacity || 0;
//初始化透明度变化值为0
var val = 150;
//循环将透明值以5递减,即淡出效果
(function(){
iBase.SetOpacity(elem, val);
val -= 10;
console.log(opacity)
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(){
}
btns[1].onclick = function(){
fadeOut(iBase.Id('fadeOut'),40);
}
btns[2].onclick = function(){
fadeOut(iBase.Id('fadeTo'), 20, 10);
}*/
$(".topic_foot_ul2").on("tap",function(){
var is = $(this);
is.find("a").toggleClass("red");
if(!($(".red")).length==0){
fadeIn(iBase.Id('fadeIn'),20,100);
console.log("1")
}else{
fadeIn(iBase.Id('fadeOut'),20,100);
}
})
}