How to add and remove glow for Raphael element?

Question

I am trying to set up a hover for a raphael element so that when the mouse is on the element, it has a glow and when the mouse leaves, the glow is removed. I have figured out ho

Answer 1

Alright, a bit of a hack.

You're not going to be able to remove the glow easily because the glow is actually an array of elements, for whatever reason there isn't a removeGlow function yet that captures and nails them.

Here's what I came up with, I actually have a project right now that needed this functionality, came on here to fix it and figured I'd come up with something once I saw your post.

Alright, step 1:

Add an empty array above your init stuff, this is going to hold your glows.

var glowsToBeRemoved = [];

Step 2: Go into raphael.js and find (within elproto.glow):

for (var i = 1; i < c + 1; i++) {
        out.push(r.path(path).attr({
            stroke: s.color,
            fill: s.fill ? s.color : "none",
            "stroke-linejoin": "round",
            "stroke-linecap": "round",
            "stroke-width": +(s.width / c * i).toFixed(3),
            opacity: +(s.opacity / c).toFixed(3)
        }));
    }

Right after this (and before the return) add:

glowsToBeRemoved.push(out);

So what this is doing, is pushing all of the glows as they're created into an array.

Now to delete them, you'd create a loop with .remove(); on your hover-outs. Here's what it'd look like:

var i = 0;
var size=glowsToBeRemoved.length;
for(i=0; i < size; i++)
{
    glowsToBeRemoved[i].remove();
}

You can smash that into a function and attach it to your hover out, or whatever you want to do with it.

Look good?