Javascript 用Raphael.js延迟移除元素

我试图用拉斐尔创作一个有多个场景的详细动画，但我遇到了一个问题；如果要移动到另一个场景，如何延迟删除元素？在我的动画中，第一个“场景”是四只海豹从水体中弹出，之后我希望它们在水下，这需要从场景中移除不必要的元素。但是，我不确定如何在第一个场景结束时删除这些元素。目前我唯一能想到的办法就是作弊，并在页面外设置动画。另外，是否有一种方法可以将第一个场景中的元素组合在一起，然后移除该组元素，而不必逐个移除它们？以下是我目前掌握的情况：

window.onload = function (){

    var paper = new Raphael( 0, 0, 800, 600);

    var backGround = paper.rect(0,0,800,600).attr({ fill: "90-white:60-#9dc8f3", stroke : "none"});

    var sun = paper.circle (400, 300, 60).attr({ fill: "90-orange-yellow", stroke : "none"})

    var water1 = paper.rect(0,200,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var seal1 = paper.image("sealright.png", 190, 270, 140, 175);

    var water2 = paper.rect(0,280,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var seal2 = paper.image("sealleft.png", 430, 350, 180, 225);

    var water3 = paper.rect(0,360,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var seal3 = paper.image("sealright.png", 70, 430, 220, 275);

    var water4 = paper.rect(0,440,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var seal4 = paper.image("shadeseal.png", 460, 510, 260, 327);

    var water5 = paper.rect(0,520,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var iceright = paper.image("icerights.png", 584, 198, 276, 246.5);

    var iceleft = paper.image("icelefts.png", -60, 198, 276, 246.5);

    var opac = paper.rect(0,0,800,600).attr({ fill: "white", "fill-opacity": "0.4",stroke : "none"});

    var playButton = paper.path("M 300 180 R 500 300 300 420 z");

playButton.attr({fill: '#eff', stroke: '#9df', 'stroke-width': 10});

playButton.hover(function () {
    playButton.attr({"stroke": "#fff"});
  },
  function () {
    playButton.attr({"stroke": "#9df"});
  }
);

var sunanim = Raphael.animation({cy : 100, opacity: "0.4"}, 1000, "elastic");

var sealanim = Raphael.animation({y : 170}, 300, "backOut");

var sealanim2 = Raphael.animation({y : 210}, 300, "backOut");

var sealanim3 = Raphael.animation({y : 260}, 300, "backOut");

var sealanim4 = Raphael.animation({y : 310}, 300, "backOut");


var backgroundchange1 = Raphael.animation({ fill: "90-#0d0e46-#0b94da"}, 0);


function musicStart(){
    opac.remove();

    var clickSound = new Audio('Funk-tabulous.mp3');

    clickSound.play();
};

function musicStart(){
    opac.remove();

    var clickSound = new Audio('Funk-tabulous.mp3');

    clickSound.play();
};

function anim(){
    sun.animate(sunanim.delay(1000))

    seal1.animate(sealanim.delay(2000));

    seal2.animate(sealanim2.delay(2400));

    seal3.animate(sealanim3.delay(2800));

    seal4.animate(sealanim4.delay(3200));
};

function remove(){
    sun.remove();
};

function anim2(){
    backGround.animate(backgroundchange1.delay(3800));
};

function animation(){
    playButton.remove();

    musicStart();

    anim();

    anim2();
};

playButton.click(function(){
    animation();
});

};

---

你可以隐藏元素吗（否则你可以使用同样的原理，让函数实际移除元素，第四个动画元素是回调）。这是一个组合，一步接一步地移动，然后隐藏。在这里拉小提琴

编辑：我在这里更新了一把小提琴来移动一组

var paper = new Raphael(100,0,2000,2000);
var rect = paper.rect(50,50,50,50);
var rect2 = paper.rect(100,100,100,100);
var set = paper.set();
set.push( rect, rect2 );

var animation = Raphael.animation({ x: 200 },200,"linear", animateCircle);

set.animate( animation );

var circle = paper.circle(50,50,50);
function animateCircle() {
    circle.animate({ cx : 200 }, 200, "linear", hideCircle);
};

function hideCircle() {
    set.hide();
}