Fx.Move

docs

Fx.Move is a lot like 04-element.position in that it allows you to position an element relative to another one. In fact, it takes all the same arguments as setPosition (relativeTo, position, edge, and offset) but it also takes all the options of Fx.Tween so you can set a transition or duration, etc.

The default is to position is centered relative to the target:

new Fx.Move($('setPositionTarget')).start(); //centered in the window

new Fx.Move($('setPositionTarget'), {
  relativeTo: $('fxTarget') /*centered over a target*/
}).start();

new Fx.Move($('setPositionTarget'), {
  relativeTo: $('fxTarget'),
  position: 'upperRight'
}).start();

new Fx.Move($('setPositionTarget'), {
  relativeTo: $('fxTarget'),
  position: 'upperLeft'
}).start();

new Fx.Move($('setPositionTarget'), {
  relativeTo: $('fxTarget'),
  position: 'bottomLeft'
}).start();

new Fx.Move($('setPositionTarget'), {
  relativeTo: $('fxTarget'),
  position: 'upperRight',
  offset: {x: 20, y: 20} /*move over and down*/
}).start();

Additionally, you can specify an edge option that allows you to align the specified edge of the element relative to the relativeTo element's edge specified in the position argument. This lets you, for instance, position the upper right corner of the element to the bottom left corner of the relativeTo element.

Examples:

/* upperRight of element aligned to upperRight of relativeTo element*/
new Fx.Move($('setPositionTarget'), {
  relativeTo: $('fxTarget'),
  position: 'upperRight',
  edge: 'upperRight'
}).start();

/* bottomLeft of element aligned to bottomLeft of relativeTo element*/
new Fx.Move($('setPositionTarget'), {
  relativeTo: $('fxTarget'),
  position: 'bottomLeft',
  edge: 'bottomLeft'
}).start();

/* center of element aligned to upperRight of relativeTo element*/
new Fx.Move($('setPositionTarget'), {
  relativeTo: $('fxTarget'),
  position: 'upperRight',
  edge: 'center'
}).start();

You can also specify the options available in Fx.Morph:

new Fx.Move($('setPositionTarget'), {
  relativeTo: $('fxTarget'),
  position: 'upperRight',
  offset: {x: 20, y: 20},
  transition: Fx.Transitions.Elastic.easeOut,
	duration: 1000
}).start();

Element.move(options) is just a shortcut to use the "built-in" instance of Fx.Move (much like Element.tween is a shortcut to a "built-in" instance of Fx.Tween).

$('setPositionTarget').move({
  relativeTo: $('fxTarget'),
  position: 'bottomLeft',
  edge: 'bottomLeft'
});

Like Fx.Tween or Fx.Morph, you can use Element.get and Element.set to control the "built-in" version of Fx.Move:

$('myElement').set('move', {
	duration: 1000,
	transition: 'bounce:out'
});

$('myElement').get('move').cancel();