This effect moves an element by modifying its position attributes.
Syntax
This will move the object to the top left corner of the window (x=0; y=0):
new Y.Effects.Move({ node: "#node", x:0, y:0, mode: "absolute" });
Y.one("#node").move({ x:0, y:0, mode: "absolute" });
This will move the object 30px up and 20px to the right relative to its current position:
new Y.Effects.Move("#node", { x: 20, y: -30, mode: "relative" });
Y.one("#node").move({ x: 20, y: -30, mode: "relative" });
Configuration properties
| Properties |
Description |
| x |
The "x" position to move the node to as determined by the mode. |
| y |
The "y" position to move the node to as determined by the mode. |
| mode |
Either "absolute" or "relative." If "absolute," the node is moved to that position absolutely. Otherwise, the node is moved relative to it's current position. |
Notes
Demo
Source code of this demo
<style type="text/css">
a#move_demo { background:#fa0000; color:#fff; padding:5px; border:1px solid #000; }
</style>
<a href="#" id="move_demo">Click me for a demo!</a>
<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("#move_demo").on("click", function (event) {
this.move({ x:60, y: -30, mode: "relative" });
event.halt();
});
});
</script>
