Script.aculo.us includes a nice effect called Effect.DropOut,
which let’s the element fall in an “invisible trap” underneath. Surprisingly there isn’t an opposite effect.
Calling Effect.DropOut with Effect.Transitions.reverse as transition, doesn’t work either. So what to do?
Effect.Emerge to the rescue!
Effect.Emerge = function(element) {
element = $(element);
var oldStyle = {
top: element.getStyle('top'),
left: element.getStyle('left') };
var position = element.positionedOffset();
return new Effect.Parallel(
[ new Effect.Move(element, {x: 0, y: -100, sync: true }),
new Effect.Opacity(element, { sync: true, from: 0.0, to: 1.0 }) ],
Object.extend(
{ duration: 0.5,
beforeSetup: function(effect) {
effect.effects[0].element.show().makePositioned().setStyle( { top: (position.top + 100) + 'px' });
},
afterFinishInternal: function(effect) {
effect.effects[0].element.undoPositioned().setStyle(oldStyle);
}
}, arguments[1] || { }));
};
Basically it’s just a modified version of Effect.DropOut toreverse the effect. Try it in compination with
Effect.multiple!