Menu

Published by
Categories: JavaScript

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!

Cover medium

Learn how to build SaaS applications!

I’m writing a book on building SaaS applications using Ruby on Rails. Sign up now to get a sneak peek at the outline, and an exclusive discount when it’s ready.

Thanks for checking by, mate! You're already signed up to be notified about the release of the SaaS Guidebook. In the meantime, why don't you check out the current outline of the book?

Download the outline