Sicherlich gibt es einige fertige Routinen um einen Fade Effekt zu erzielen, z.B. jQuery .fadeIn() und .fadeOut(), aber manchmal reicht auch die kleine Lösung.
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Simple Fade Example</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
<script type="text/javascript">
/* <![CDATA[ */
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
function getOpacity(el, def) {
var result;
var style=document.defaultView.getComputedStyle(el, null);
if ('opacity' in style) {
result = style.opacity;
} else if ('MozOpacity' in style) {
result = style.MozOpacity;
} else if ('filter' in style) {
var match = style.filter.match(/alpha\(opacity=([\d.]+)\)/);
if (match) {
result = String(match[1] / 100);
}
}
result = parseInt(result);
if (!isNaN(result)) result = def;
return result;
}
function setOpacity(el, val) {
el.style.opacity = val;
el.style.MozOpacity = val;
el.style.filter = "alpha(opacity=" + (val*100) + ")";
}
function fadeIn(id) {
var el = document.getElementById(id);
var opacity = getOpacity(el, 0);
var last = new Date();
var tick = function() {
opacity += (new Date() - last) / 400;
setOpacity(el, (opacity>1 ? 1 : opacity));
last = new Date();
if (opacity < 1) { window.requestAnimFrame(tick); }
};
tick();
}
function fadeOut(id) {
var el = document.getElementById(id);
var opacity = getOpacity(el, 1);
var last = new Date();
var tick = function() {
opacity -= (new Date() - last) / 400;
setOpacity(el, (opacity<0 ? 0 : opacity));
last = new Date();
if (opacity > 0) { window.requestAnimFrame(tick); }
};
tick();
}
/* ]]> */
</script>
</head>
<body><button onclick="fadeIn('el');">in</button><button onclick="fadeOut('el');">out</button>
<div id="el" style="display:block; background-color:silver; border:1px solid red; width:100px; height:100px;"></div>
</body>
</html><!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Simple Fade Example</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
<script type="text/javascript">
/* <![CDATA[ */
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
if (!window.Element ) {
Element = function(){};
}
Element.prototype.getOpacity = function(def) {
var result;
var style = document.defaultView.getComputedStyle(this, null);
if ('opacity' in style) {
result = style.opacity;
} else if ('MozOpacity' in style) {
result = style.MozOpacity;
} else if ('filter' in style) {
var match = style.filter.match(/alpha\(opacity=([\d.]+)\)/);
if (match) {
result = String(match[1] / 100);
}
}
result = parseInt(result);
if (!isNaN(result)) result = def;
return result;
};
Element.prototype.setOpacity = function(val) {
this.style.opacity = val;
this.style.MozOpacity = val;
this.style.filter = "alpha(opacity=" + (val*100) + ")";
};
Element.prototype.fadeIn = function() {
var self = this;
var opacity = this.getOpacity(0);
var last = new Date();
var tick = function() {
opacity += (new Date() - last) / 400;
self.setOpacity(opacity>1 ? 1 : opacity);
last = new Date();
if (opacity < 1) { window.requestAnimFrame(tick); }
};
tick();
};
Element.prototype.fadeOut = function() {
var self = this;
var opacity = this.getOpacity(1);
var last = new Date();
var tick = function() {
opacity -= (new Date() - last) / 400;
self.setOpacity(opacity<0 ? 0 : opacity);
last = new Date();
if (opacity > 0) { window.requestAnimFrame(tick); }
};
tick();
};
if (!window.Element ) {
var __createElement = document.createElement;
document.createElement = function(tagName) {
var element = __createElement(tagName);
if (element == null) {return null;}
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}
var __getElementById = document.getElementById;
document.getElementById = function(id) {
var element = __getElementById(id);
if (element == null) {return null;}
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}
}
/* ]]> */
</script>
</head>
<body><button onclick="document.getElementById('el').fadeIn();">in</button><button onclick="document.getElementById('el').fadeOut();">out</button>
<div id="el" style="display:block; background-color:silver; border:1px solid red; width:100px; height:100px;"></div>
</body>
</html>