July 24th, 2008
Script.aculo.us should have Effect.Emerge
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!
1 2 Effect.Emerge = function(element) { 3 element = $(element); 4 var oldStyle = { 5 top: element.getStyle('top'), 6 left: element.getStyle('left') }; 7 var position = element.positionedOffset(); 8 return new Effect.Parallel( 9 [ new Effect.Move(element, {x: 0, y: -100, sync: true }), 10 new Effect.Opacity(element, { sync: true, from: 0.0, to: 1.0 }) ], 11 Object.extend( 12 { duration: 0.5, 13 beforeSetup: function(effect) { 14 effect.effects[0].element.show().makePositioned().setStyle( { top: (position.top + 100) + 'px' }); 15 }, 16 afterFinishInternal: function(effect) { 17 effect.effects[0].element.undoPositioned().setStyle(oldStyle); 18 } 19 }, arguments[1] || { })); 20 };
Basically it’s just a modified version of Effect.DropOut to reverse the effect. Try it in compination with Effect.multiple ... :-)
