javascript - 如何为拉斐尔元素添加和移除辉光？

Question

我正在尝试为 raphael 元素设置悬停，以便当鼠标在元素上时，它会发光，而当鼠标离开时，发光会消失。我已经想出如何添加光晕，但我无法移除它。这是我的脚本的样子:

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

所以有效的部分是当我将鼠标悬停在圆上时向它添加光晕。但是，当鼠标从圆形元素移开时，我不知道如何去除发光。您知道如何去除元素的光晕吗？

注意:body 元素的背景设置为黑色 (#000)。

使用的库:

• JQuery
• 拉斐尔.js

Answer 1

解决方案可能比您想象的更简单。

http://jsfiddle.net/vszkW/2/ (来自 Matt 的 fiddle )

您只需要储存元素“发光”即可。和拉斐尔一样，元素有一个 .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();
    });