swdyh

effects.js(script.aculo.us)のAppearとFadeをちょっとカッコ良く

2006-12-27 00:48:24

ここではJSを動かせないので、あとでデモをどこかに置く。

※追記 デモはここ。
http://swdyh.infogami.com/slideapepar_and_slidefade

Effect.SlideAppear = function(element) {
    element = $(element);
    var options = arguments[1] || {};
    options.duration = options.duration || 0.5
    var x = options.slideX || 0;
    var y = options.slideY || 15;
    var beforeOpt = {
        transition: Effect.Transitions.full,
        duration: 0.05,
        afterFinishInternal:function() {
        new Effect.Parallel(
            [new Effect.MoveBy(element, y, x),
             new Effect.Appear(element)], 
            options);}
    }
    return new Effect.MoveBy(element, -y, -x, beforeOpt)
}

Effect.SlideFade = function(element) {
    element = $(element);
    var options = arguments[1] || {};
    options.duration = options.duration || 0.5
    var x = options.slideX || 0;
    var y = options.slideY || 15;
    options.afterFinishInternal = function() {
        var opt = {
          transition: Effect.Transitions.full,
          duration: 0.05
        }
        new Effect.MoveBy(element, y, x, opt)
    }
    return new Effect.Parallel(
        [new Effect.Fade(element),
         new Effect.MoveBy(element, -y, -x)],
        options);
}