JQuery, cytoscape.js - How to queue two different loops containing cytoscape animations?

Question

I would like to execute one loop (1.), wait until animations from that loop end, then execute second loop with animations (2.). Can somebody tell me how to do it in an optimal way in this particular case?

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

Create animations via cy.animation() and ele.animation().

ele.animation().promise() gives a promise that you can use for chaining.