This effect simulates a window blind, where the contents of the affected elements stay in place.
Syntax
new Y.Effects.BlindDown({ node: "#node" });
Y.get("#node").blindDown();
Configuration properties
None.
Notes
This effect has an oppostie twin -- Y.Effects.BlindUp.
If the element you're blinding has top or bottom padding, the padding isn't applied unless the element is full size. This will make an odd jumping motion right after the end of a blinddown or right before the start of a blindup. To fix it, wrap your padded element in another element, and do the blind on the outer one.
Demo
Source code of this demo
Go Red Sox! Go Red Sox!
<ul>
<li><a id="blinddown_run" href="#">Click here for a demo!</a></li>
<li><a id="blinddown_reset" href="#">Reset</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.js",
requires: ["node", "anim", "async-queue", "base"]
}
}
}).use("gallery-effects", function (Y) {
Y.get("#blinddown_run").on("click", function (event) {
Y.get("#blinddown_demo").blindDown();
event.halt();
});
Y.get("#blinddown_reset").on("click", function (event) {
Y.get("#blinddown_demo").hide();
event.halt();
});
});
</script>
