script.aculo.us - Move Effect

Description

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.

Syntax

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

Effect-Specific Parameters

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.

Example

Live Demo 
<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 −

scriptaculous_effects.htm
Advertisements