试图让这个 script.aculo.us javascript 幻灯片做我想做的事

Question

所以我使用 .fade 和 .appear 让这个幻灯片工作得非常好，但是我做这个的人对此并不满意，他们希望它表现得像 THIS ONE 那样，文本覆盖消失了图像向一侧滑动，然后叠加层重新弹出。

script.aculo.us 有一个 .DropOut，但没有相反的功能，所以我正在使用我在其他地方找到的一个。

这是我到目前为止的代码，但幻灯片没有做任何事情。它只是加载第一个图像和覆盖，就是这样。没有动画。我确定我在某处犯了一些语法错误，但它是有效的并且没有给出任何错误。

JSFiddle（也包括 html 和 css）

请注意，这仍然不适应从右侧滑入的新图像，我还没有找到效果。现在，如果它按原样工作，我会很高兴。

var i = 0;
var image_slide = new Array('image-1', 'image-2');
var overlay_slide = new Array('overlay-1', 'overlay-2');
var NumOfImages = image_slide.length;
var wait = 8000;

function SwapImage(x, y) {
    $(overlay_slide[y]).DropOut({
        duration: 0.5
    });
    $(overlay_slide[y]).fade({
        duration: 0.1
    });
    $(image_slide[x]).appear({
        duration: 0.5
    });
    $(image_slide[y]).Move({ 
        x: -1000, 
        y: 0, 
        mode: 'relative',
        duration: 0.5
    });
    $(overlay_slide[x]).appear({
        duration: 0.1
    });
    $(overlay_slide[x]).Emerge({
        duration: 0.5
    });
}

function StartSlideShow() {
    play = setInterval(Play, wait);
}

function Play() {
    var imageShow, imageHide;

    imageShow = i + 1;
    imageHide = i;

    if (imageShow == NumOfImages) {
        SwapImage(0, imageHide);
        i = 0;
    } else {
        SwapImage(imageShow, imageHide);
        i++;
    }
}

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

Answer 1

你在正确的轨道上只是需要多玩一下效果库，Emerge 功能太多了，你需要更简单。

我已经更新了你的 jsfiddle

http://jsfiddle.net/aB79G/3/

基本上你需要准备下一张向右的幻灯片，并使用Effect.Morph而不是Effect.Move一次移动两张图片

还请注意我是如何使用afterFinish 回调的，它允许您将效果串在一起。