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();
    });