Question

我的功能设置如下：

function sixth_screen_intro() {
    current_slide = 7;
    fifth_screen_outro();

    $("#voting-txt").animate({
        top: "50%",
        marginTop:-80
    },500);
}

这里是第五个_screen_outro（）供参考，但作为一个注释，我想将它们分开：

function fifth_screen_outro() {
    $("#budget-txt").animate({
        left:600
    },500);
    coin_hop();
    $("#piggy_bank").animate({
        marginTop:-190,
        left:50
    },70, function() {
        $("#piggy_bank").animate({
            marginTop:-141,
            left:0
        },70, function () {
            coin_hop_delay();
            $("#piggy_bank").delay(400).animate({
                marginTop:-190,
                left:-50
            },70, function () {
                $("#piggy_bank").animate({
                    marginTop:-141,
                    left:-100
                },70, function () {
                    coin_hop_delay();
                    $("#piggy_bank").delay(400).animate({
                        marginTop:-190,
                        left:-150
                    },70, function () {
                        $("#piggy_bank").animate({
                            marginTop:-141,
                            left:-200
                        },70, function () {
                            coin_hop_delay();
                            $("#piggy_bank").delay(400).animate({
                                marginTop:-190,
                                left:-250
                            },70, function () {
                                $("#piggy_bank").animate({
                                    marginTop:-141,
                                    left:-300
                                },70, function () {
                                    coin_hop_delay();
                                    $("#piggy_bank").delay(400).animate({
                                        marginTop:-190,
                                        left:-350
                                    },70, function () {
                                        $("#piggy_bank").animate({
                                            marginTop:-141,
                                            left:-400
                                        },70);
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
}

使用简单的单击调用six_screen_intro（）。有没有办法让vote-txt动画不播放，直到fifth_screen_outro（）完成执行？也许某种回调？

Answer 1

摆脱所有嵌套的东西，并使用你可以调用的函数：

function fifth_screen_outro(callback) {
    var i = 0, l = 0;

    $("#budget-txt").animate({
        left:600
    },500);
    coin_hop();
    ani(-141, 10);

    function ani(val, times) {
        var s = val == -190;
        if (s) coin_hop_delay();
        $("#piggy_bank").delay(s ? 400 : 0).animate({
            marginTop: val,
            left: l
        },70, function() {
            if (i >= times) {
                callback();
            }else{
                l += 50;
                i++;
                ani(s ? -141 : -190, times);
            }
        });
    }
}

FIDDLE

Answer 2

你可以使用超时功能，以便在一段时间后调用$（“＃voting-txt”）。animate，或者你可以在完成jquery时使用它来实现这一点。

超时很简单，可以解决您的问题

setTimeout(function() {
        $("#voting-txt").animate(){}
    }, 1000);

如果您的first（）函数异步执行某些操作（例如发出Ajax请求），那么您将希望对该异步请求进行second（）回调，而不是在first（）返回后立即执行。

Answer 3

您还可以使用deferred：

function sixth_screen_intro() {
    current_slide = 7;
    fifth_screen_outro().done(function() {
        $("#voting-txt").animate({
            top: "50%",
            marginTop:-80
        },500);
    });
}

function fifth_screen_outro() {
    var def = $.Deferred();
    $("#budget-txt").animate({
        left:600
    },500);
    coin_hop();
    $("#piggy_bank").animate({
        marginTop:-190,
        left:50
    //...
                                    },70, function () {
                                        $("#piggy_bank").animate({
                                            marginTop:-141,
                                            left:-400
                                        },70, function() {
                                           def.resolve(true);
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
    return def.promise();
}

jquery等待一个函数在另一个函数启动之前运行

3 个答案: