script.aculo.us - Move Effect


Advertisements


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.

Option Description
x-coordinate Specifies the change in horizontal position. A negative x value moves the element to the left.
y-coordinate Specifies the change in vertical position. A negative value moves the element "up" the page.
mode Specifies the positioning mode of the element. It can be either absolute or relative. By default, is relative.

Example

<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