This effect changes an element’s opacity (transparency).
Syntax
new Y.Effects.Opacity([options]);
Y.one("#node-id").opacity([options]);
Examples
A simple example:
new Y.Effects.Opacity({
node: "#node",
from: 1.0,
to: 0.7,
duration: 0.5
});
This will fade the element from 100% to 70% over the space of 1/2 second.
Notes
Microsoft Internet Explorer can only set opacity on elements that have a ‘layout’ (see IE Element Layout).
Demo
Source code of this demo
<ul>
<li><a href="#" id="opacity_run">Hide this box</a></li>
<li><a href="#" id="opacity_reset">Show this box</a></li>
</ul>
<script type="text/javascript">
YUI({
modules: {
"gallery-effects": {
fullpath: "http://projects.sophomoredev.com/media/system/js/yui3-gallery/gallery-effects/gallery-effects-min.js",
requires: ["node", "anim", "async-queue", "base"]
}
}
}).use("gallery-effects", function (Y) {
Y.get("#opacity_run").on("click", function (event) {
Y.get("#opacity_demo").opacity({ from: 1.0, to: 0.0, duration: 0.5 });
event.halt();
});
Y.get("#opacity_reset").on("click", function (event) {
Y.get("#opacity_demo").opacity({ from: 0.0, to: 1.0, duration: 2 });
event.halt();
});
});
</script>
