2

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!

4

1 に答える 1

0

同等のものはありません。「スイッチオフ」は、ちらつき、不透明度、スケールなどの効果の組み合わせです。自分で書く必要があります。Scriptaculous関数は次のとおりです。

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] || { }));
};

ソースファイルeffects.jsから取得。

于 2012-06-04T13:48:09.327 に答える