JQuery，如何对包含细胞景观动画的两个不同循环进行排队

Question

我想执行一个循环（1.），等待该循环的动画结束，然后用动画执行第二个循环（2.）。有人能告诉我在这种特殊情况下如何以最佳方式执行吗？

cy.on("tap", ".story_node", function () {
    var node = this;
    var crudObjects = [
        {
            node: { group: "nodes", data: { id: "edit", content: "Edytuj" }, position: { x: node.position("x"), y: node.position("y") }, classes: "crud" },
            edge: { group: "edges", data: { source: node.id(), target: "edit" }, classes: "crud_edge" },
            targetPos: { x: node.position("x") + 150, y: node.position("y") - 75 }
        },
        {
            node: { group: "nodes", data: { id: "create", content: "Dodaj" }, position: { x: node.position("x"), y: node.position("y") }, classes: "crud" },
            edge: { group: "edges", data: { source: node.id(), target: "create" }, classes: "crud_edge" },
            targetPos: { x: node.position("x") + 200, y: node.position("y") }
        },
        {
            node: { group: "nodes", data: { id: "delete", content: "Usuń" }, position: { x: node.position("x"), y: node.position("y") }, classes: "crud" },
            edge: { group: "edges", data: { source: node.id(), target: "delete" }, classes: "crud_edge" },
            targetPos: { x: node.position("x") + 150, y: node.position("y") + 75 }
        }
    ];
    // (1.)
    var areCrudNodesAdded = cy.$(".crud").length > 0;
    var source = cy.$(".crud").predecessors().sources().first();
    var delay = 0;
    var duration = 250;
    if (areCrudNodesAdded) {
        var crudNodes = cy.$(".crud");
        for (var i = 0; i < crudNodes.length; i++) {
            var currNode = crudNodes[i];
            (function (currNode) {
                currNode.delay(delay).animate({
                    position: source.position(),
                    css: {
                        "width": 10,
                        "height": 10,
                        "border-width": 0,
                        "opacity": 0
                    }
                }, {
                    duration: duration,
                    complete: function () {
                        currNode.remove();
                    }
                });
                delay += duration;
            })(currNode);
        }
    }
    // (2.)
    if (!areCrudNodesAdded || source !== this) {
        source = this;
        $.each(crudObjects, function (idx, crud) {
            var crudNode = cy.add(crud.node);
            cy.add(crud.edge);
            crudNode.css({
                "width": 10,
                "height": 10,
                "border-width": 0,
                "opacity": 0
            }).delay(delay).animate({
                position: crud.targetPos,
                css: {
                    "width": 80,
                    "height": 80,
                    "border-width": 2,
                    "opacity": 1
                }
            }, {
                duration: duration,
                complete: function () {
                    crudNode.removeCss();
                }
            });
            delay += duration;
        });
    }
}); // on tap

Answer 1

通过cy.animation()和ele.animation()创建动画。

ele.animation().promise()提供了一个可以用于链接的承诺。