Moves an element to another location (relative to another element) with a transition.

• Online Tutorial/Demo

• Fx.Morph

new Fx.Move(element[, options]);

1. element - (mixed) A string of the id for an Element or an Element reference to relocate
2. options - (object, optional) An object with options for the effect. See below.

• relativeTo - (mixed) a string of the id for an Element or an Element reference relative to which to position this one; defaults to document.body.
• position - (string) the aspect of the relativeTo element that this element should be positioned. Options are 'upperRight', 'upperLeft', 'bottomLeft', 'bottomRight', and 'center' (the default). With the exception of center, all other options will make the upper right corner of the positioned element = the specified corner of the relativeTo element. 'center' will make the center point of the positioned element = the center point of the relativeTo element.
• edge - (string) the edge of the element to set relative to the relative elements corner; this way you can specify to position this element's upper right corner to the bottom left corner of the relative element. this is optional; the default behavior positions the element's upper left corner to the relative element unless position == center, in which case it positions the center of the element to the center of the relative element. Acceptable values here are the same as those in the 'position' option.
• offset - (object) x/y coordinates for the offset (i.e. {x: 10, y:100} will move it down 100 and to the right 10). Negative values are allowed.

• (object) A new instance of Fx.Move.

var mover = new Fx.Move($('myelement'), {
    relativeTo: $('someOtherElement'),
    position: 'upperRight',
    edge: 'upperLeft',
    offset: {x: 10, y: 100}
});
mover.start(); //moves to the new location
mover.start({
    relativeTo: document.body,
    position: 'center',
    edge: false,
    offset: {x:0,y:0}
}); //move it to the center of the window

• Fx.Morph

Moves the element to provided destination or the destination specified in the options.

myFxMove.start(options); //options are not required

1. destination - (object, optional) an object of key/value options specifying a new position for the element; if not provided the values in the options set at initialization will be used.

• See all the arguments defined in the options above for the key/value options in the destination object.

• (object) This Fx.Move instance.

• If you want to pass in a destination, you must pass in ALL of the options (relativeTo, position, edge, and offset x & y) unless you want to use those already defined in the options at initialization. In other words, if you only pass in one of these options, the rest will be filled in from the options defined at initialization.
• You can always set new defaults using setOptions.

Extends the Element Type with Fx.Move methods.

Sets a default Fx.Move instance for an Element.

el.set('move'[, options]);

1. options - (object, optional) The Fx.Move options.

• (element) This Element.

el.set('move', {duration: 'long', transition: 'bounce:out'});
el.move(); //centers on the screen

Gets the default Fx.Move instance for the Element.

el.get('move');

• (object) The Element's internal Fx.Move instance.

el.set('move', {duration: 'long', transition: 'bounce:out'});
el.move({relativeTo:$('myDiv'));
el.get('move'); //The Fx.Move instance.

Adds Fx.Move shortcuts to the Element class.

Creates a new instance of Fx.Move and calls its start method.

$(element).move(options);

• options - (object) a key/value set of options. See Fx.Move:options.

• (element) This Element.

$(element).move({relativeTo: $('myDiv')});