Copyright © tutorialspoint.com
This effect moves an element. Its older version has 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 following parameters in addition to common parameters.
Option | Description |
---|---|
x-coordinate | This specifies the change in horizontal position. A negative x value moves the element to the left. |
y-coordinate | This specifies the change in vertical position. A negative value moves the element "up" the page. |
mode | This specifies the positioning mode of the element. It can be either absolute or relative. By default its 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> |
This will slowly move the target element down and to the right by 10 pixels each.
To understand it in better way you can Try it yourself.
Copyright © tutorialspoint.com