Scriptaculous Effect.SwitchOff — What is the jQuery equivalent?

Question

I'm migrating the frontend of my web app from Prototype/Scriptaculous to jQuery. I've searched the jQuery UI for the equivalent of the Scriptaculous SwitchOff effect, with no results.

You can see the Scriptaculous Effect here: http://jsfiddle.net/p46DA/

My client loves the effect as it mimics his ol' TV and it's a very intuitive UX for deleting files etc.

As jQuery has no built-in switch-off-effect, I thought you could maybe achieve it thru fading with a customized easing curve??? Does anyone have experience with that?

Thank you, community!

Answer 1

There is no equivalent. "SwitchOff" is a combination of effects: flicker, opacity and scale. You'd need to write it yourself. Here's the Scriptaculous function:

Effect.SwitchOff = function(element) {
  element = $(element);
  var oldOpacity = element.getInlineOpacity();
  return new Effect.Appear(element, Object.extend({
    duration: 0.4,
    from: 0,
    transition: Effect.Transitions.flicker,
    afterFinishInternal: function(effect) {
      new Effect.Scale(effect.element, 1, { 
        duration: 0.3, scaleFromCenter: true,
        scaleX: false, scaleContent: false, restoreAfterFinish: true,
        beforeSetup: function(effect) { 
          effect.element.makePositioned().makeClipping();
        },
        afterFinishInternal: function(effect) {
          effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
        }
      })
    }
  }, arguments[1] || { }));
};

taken from source file effects.js.