This effect moves an element. Its older version has the name Effect.MoveBy.
In order for this effect to work correctly across all browsers, the element to be moved must be a positioned element. That is, it must have a CSS position rule applied, and the value of the position may be either of absolute or relative.
You can use one of the following two forms to use this effect −
new Effect.MoveBy('id_of_element', {x, y, mode, [options]}); OR new Effect.MoveBy(element, {x, y, mode, [options]});
This effect has the following parameters in addition to the common parameters.
Sr.No | Option & Description |
---|---|
1 |
x-coordinate Specifies the change in horizontal position. A negative x value moves the element to the left. |
2 |
y-coordinate Specifies the change in vertical position. A negative value moves the element "up" the page. |
3 |
mode Specifies the positioning mode of the element. It can be either absolute or relative. By default, it is relative. |
<html> <head> <title>script.aculo.us examples</title> <script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects"></script> <script type = "text/javascript"> function MoveEffect(element){ new Effect.MoveBy(element, { x:10, y:10, duration:1 } ) } </script> </head> <body> <div onclick = "MoveEffect(this)"> Click me to see the result of Move Method </div> </body> </html>
It will slowly move the target element down and to the right by 10 pixels each.
This will produce following result −