Question

I’m trying to create an animation where I create 4 circles in Raphael 10 seconds after the page is loaded. Then, 10 seconds later, I want to remove all of these circles, and make 10 more (10 new circles with names that are different than the original 10).

This is what I have:

var paper = Raphael(0, 100, 1350, 800);

setTimeout(function() {
    var a1 = paper.circle(200,200,100);
    var a2 = paper.circle(300,300,100);
    var a3 = paper.circle(400,400,100);
    var a4 = paper.circle(500,500,100);
}, 10000);

setTimeout(function() {
    a1.remove();
    a2.remove();
    a3.remove();
    a4.remove();

    var b1 = paper.circle(300,200,100);
    var b2 = paper.circle(400,300,100);
    var b3 = paper.circle(500,400,100);
    var b4 = paper.circle(600,500,100);
}, 20000);

However, when I get to the send setTimeout, the .remove()‘s don’t do anything. They kill the rest of the script. When I take them out, the new circles create just fine, but I can’t get rid of the first set.

I understand this is something with the bindings, but I can’t get it to work. I tried doing this in the first setTimeout:

setTimeout(function() {
    var a1 = paper.circle(200,200,100);
    $(a1.node).live();
    var a2 = paper.circle(300,300,100);
    $(a2.node).live();
    var a3 = paper.circle(400,400,100);
    $(a3.node).live();
    var a4 = paper.circle(500,500,100);
    $(a4.node).live();
}, 1000);

But when it gets to the first .live() it dies.

Any advice? I feel like there is something very basic that I’m missing. Maybe some behind the scenes explanation as to what it’s trying to do?

I will be expanding this to almost 100 frames (100 setTimeouts). Any advice on how to make this more efficient? I’m a bit new to this. Any advice would be appreciated.

Answer 1

That’s because the circles were declared inside the anonymous function passed to the first setTimeout. If you remove the var from the variable declarations, they will be global, and your code should work.

By global I mean they will belong to window. You can reference them as window.varname, or just varname (if there is no other var varname in the same scope where you are trying to reference varname).