试图得到这个script.aculo.us javascript幻灯片--如何做我想做的事

Question

所以我用.fade和.appear让这个幻灯片运行得很好，但是我做这件事的人对此并不满意，他们希望它表现得像这一个，其中文字覆盖会脱落，图像会侧滑，然后覆盖会弹回来。

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

你是在正确的轨道上，只是需要多玩一些效果库，出现的功能太多了，你需要变得更简单。

我更新了你的小提琴

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

基本上，您需要准备下一张幻灯片到右边，同时使用Effect.Morph而不是Effect.Move移动两张图片。

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