Copyright © Move Effects

previous next



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]});


 new Effect.MoveBy(element, {x, y, mode, [options]});

Effect Specific Parameters:

This effect has following parameters in addition to common parameters.

x-coordinateThis 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.
modeThis specifies the positioning mode of the element. It can be either absolute or relative. By default its relative


<title> examples</title>

   <script type="text/javascript" 
   <script type="text/javascript" 
   <script type="text/javascript">
   function MoveEffect(element){
       new Effect.MoveBy(element, {x:10,y:10,duration:1})
<div onclick="MoveEffect(this)">
    Click me to see the result of Move Method


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.

previous next

Copyright ©