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.
HTML
<!DOCTYPE html >
<html lang="de">
<head>
<meta charset="utf-8" />
<title>fade</title>
</head>
<body><button id="fadeIn">in</button><button id="fadeOut">out</button>
<div id="wrapper">
<div id="el"></div>
</div>
<script src="fade_object.js"></script>
</body>
</html>JavaScript
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
function getOpacity(el, def) {
var result;
var style=document.defaultView.getComputedStyle(el, null);
if ('opacity' in style) {
result = style.opacity;
}
result = parseInt(result);
if (!isNaN(result)) result = def;
return result;
}
function setOpacity(el, val) {
el.style.opacity = val;
}
function fadeIn(el) {
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.requestAnimationFrame(tick); }
};
tick();
}
function fadeOut(el) {
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.requestAnimationFrame(tick); }
};
tick();
}
var el = document.getElementById('el'),
wrapper = document.getElementById('wrapper');
wrapper.style.position = 'relative';
wrapper.style.height = '105px';
wrapper.style.width = '100%';
el.style.display = 'block';
el.style.backgroundColor = 'silver';
el.style.border = '1px solid red';
el.style.width = '100px';
el.style.height = '100px';
var btnFadeIn = document.getElementById('fadeIn');
if (btnFadeIn) {
btnFadeIn.addEventListener('click', function () {
fadeIn(el);
});
}
var btnFadeOut = document.getElementById('fadeOut');
if (btnFadeOut) {
btnFadeOut.addEventListener('click', function () {
fadeOut(el);
});
}
})();
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
if (!window.Element ) {
Element = function(){};
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;
}
}
Element.prototype.getOpacity = function(def) {
var result;
var style = document.defaultView.getComputedStyle(this, null);
if ('opacity' in style) {
result = style.opacity;
}
result = parseInt(result);
if (!isNaN(result)) result = def;
return result;
};
Element.prototype.setOpacity = function(val) {
this.style.opacity = val;
};
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.requestAnimationFrame(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.requestAnimationFrame(tick); }
};
tick();
};
var el = document.getElementById('el'),
wrapper = document.getElementById('wrapper');
wrapper.style.position = 'relative';
wrapper.style.height = '105px';
wrapper.style.width = '100%';
el.style.display = 'block';
el.style.backgroundColor = 'silver';
el.style.border = '1px solid red';
el.style.width = '100px';
el.style.height = '100px';
var fadeIn = document.getElementById('fadeIn');
if (fadeIn) {
fadeIn.addEventListener('click', function () {
el.fadeIn();
});
}
var fadeOut = document.getElementById('fadeOut');
if (fadeOut) {
fadeOut.addEventListener('click', function () {
el.fadeOut();
});
}
})();
