Hi, I'm Benedikt Deicke. I'm a web and software developer at flinc. I'm mainly building user focused web applications using Ruby on Rails and JavaScript. Additionally I'm currently finishing my studies for my master's degree and enjoying photography in my spare time. Feel free to get in touch with me!

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 ... :-)

Posted by benedikt – Filed in Javascript
Bookmark and Share

Leave a comment