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 how to add the glow, but I am having trouble removing it. Here is what my script looks like:

$(document).ready(function() {
    var paper = Raphael(0,0,360,360);
    var myCircle = paper.circle(180,180,30).attr('stroke','#FFF');
    myCircle.hover(function() {
        myCircle.glow().attr('stroke','#FFF');
    }, function() {
        // removing the glow from the circle??
    });
});

So the part that works is adding the glow to the circle when I hover over it. However, I don't know how to remove the glow when the mouse is moved away from the circle element. Do you know how I can remove the glow from an element?

Note: The background of the body element is set to black (#000).

Libraries Used:

• JQuery
• Raphael.js

Answer 1

The solution is probably more simple than you were thinking.

http://jsfiddle.net/vszkW/2/ (fork from Matt's fiddle)

You just have to stock the "glow" which is an element. And as usual in Raphael, the elements have a .remove():

myCircle.hover(
    // When the mouse comes over the object //
    // Stock the created "glow" object in myCircle.g
    function() {
        this.g = this.glow({color: "#FFF", width: 100});
    },
    // When the mouse goes away //
    // this.g was already created. Destroy it!
    function() {
        this.g.remove();
    });

Answer 2

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?

Answer 3

While Lajarre's answer is definitely the way to go, there is currently a bug in Raphael, causing the remove() method to not only remove the glow element, but also the element to which the glow was applied.

Why this is still working in Lajarre's fiddle is beyond my comprehension.

See here for more details about that issue: https://github.com/DmitryBaranovskiy/raphael/issues/508

Answer 4

This is bizarre behavior. For example (I fiddled with this for quite a few minutes):

http://jsfiddle.net/FPE6y/

As far as I can tell, this shouldn't be happening. Possibly a bug. RaphaelJS historically seems to have problems with un-doing things: How do you make an element undragable in Raphael?

Sorry I can't present a solution except that perhaps the circle is erased and replaced immediately with a new one which never had a glow applied?

Meanwhile, report the behavior at GitHub if it isn't already there. You can reference my jsFiddle in the report if you want (or fork it and submit your own).

Answer 5

This is how I add / remove the glow effect using Raphael:

paper.circle(x, y, r)
     .attr({fill: "lightblue", stroke: "lightblue", "stroke-width": 6})
     .hover(function() {
                this.glowEffect = this.glow({color:"#1693A5", width: 2});                           
            }, function() {
                this.glowEffect.remove();                       
            })
     .id = "example";

I just add ".hover" to the Raphael element.

You could also do something like:

var c = paper.circle(x, y, r);
c.hover(function() {
                this.glowEffect = this.glow({color:"#1693A5", width: 2});                           
            }, function() {
                this.glowEffect.remove();                       
            });