Question

我正在整理一个powerpoint类型的网页，其中幻灯片可以滑入，并且可以使用各种动画进行查看。动画序列保存在一个数组中（最终从数据库加载），并使用eval（）

进行调用

单击幻灯片时，会动作下一组动画，但我需要每个动画都等到上一个动画完成。因此，对于下面的代码，当SeqNo为1时，我希望ShowSlideLeft等到HideSlideRight完成。

我已经看过回调和承诺，但是我无法让它们工作，因为我无法对链接事件进行硬编码。

var SeqNo;

$(document).ready(function () {
    $('.slide').click(function (e) {
        ActivateSequence(++SeqNo);
    });

    SeqNo = 0;

    SetupSequence();

    ActivateSequence(SeqNo);
});

function SetupSequence() {
    Sequence = [];

    Sequence[0] = [];
    Sequence[0][0] = "ShowSlideLeft('S1');";

    Sequence[1] = [];
    Sequence[1][0] = "HideSlideRight('S1');";
    Sequence[1][1] = "ShowSlideLeft('S2');";
}  

function ActivateSequence(Seq) {
    var action;
    var element;

    if (Seq < Sequence.length) {
        for (var i = 0; i < Sequence[Seq].length; i++) {
            eval(Sequence[Seq][i]);
        }
    }
}

function ShowSlideLeft(div) {
    var showoptions = { "direction": "left", "mode": "show" };
    $('#' + div).effect("slide", showoptions, 1000);
}

function ShowSlideRight(div) {
    var showoptions = { "direction": "right", "mode": "show" };
    $('#' + div).effect("slide", showoptions, 1000);
}

function HideSlideLeft(div) {
    var showoptions = { "direction": "left", "mode": "hide" };
    $('#' + div).effect("slide", showoptions, 1000);
}

function HideSlideRight(div) {
    var showoptions = { "direction": "right", "mode": "hide" };
    $('#' + div).effect("slide", showoptions, 1000);
}

非常感谢您提供任何帮助。

Answer 1

您可以传递.effect（）第四个参数回调，这是一个在动画完成后调用的函数。因此，您可以通过添加回调参数并将其传递给.effect调用来更改自定义函数，如下所示：

function ShowSlideLeft(div, callback) {
    var showoptions = { "direction": "left", "mode": "show" };
    $('#' + div).effect("slide", showoptions, 1000, callback);
}

您还需要更改SetupSequence和ActivateSequence，我建议您：

将eval替换为window[function_name]以实现实际的函数调用
使用对象而不是字符串初始化Sequence数组（它们可以作为JSON字符串存储在db中，因此此更改不应影响数据库设计）

结果将是这样的：

function SetupSequence() {
    Sequence = [];

    Sequence[0] = [];
    Sequence[0][0] = { action: 'ShowSlideLeft', target: 'S1' };

    Sequence[1] = [];
    Sequence[1][0] = { action: 'HideSlideRight', target: 'S1' };
    Sequence[1][1] = { action: 'ShowSlideLeft', target: 'S2' };
}

和

function ActivateSequence(Seq, Step) {
    if (Seq < Sequence.length) {
        (window[Sequence[Seq][Step].action])(Sequence[Seq][Step].target, function() {
            // when the first effect is complete, execute the next one
            ActivateSequence(Seq, Step + 1);
        });
    }
}

请注意，稍作修改，您也可以将一系列参数传递给自定义效果函数，而不是现在传递单个参数target。

当然，您需要在ActivateSequence(SeqNo, 0)处理程序中使用click调用ActivateSequence。

Answer 2

我发现您已经在使用jQuery，为什么不使用他们的动画API？

$('.some-element').animate({width:200}, 400, callback);

提供更改对象，执行时间和回调函数。

javascript等待动画在下一个动画之前完成

2 个答案: