如何为Raphael元素添加和删除发光?

jbr*_*aud 12 javascript raphael glow

我正在尝试为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??
    });
});
Run Code Online (Sandbox Code Playgroud)

所以有效的部分是当我将鼠标悬停在圆圈上时将光晕添加到圆圈中.但是,当鼠标移离圆形元素时,我不知道如何移除光晕.你知道我怎么能从元素中消除光晕吗?

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

使用的库:

  • JQuery的
  • Raphael.js

laj*_*rre 36

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

http://jsfiddle.net/vszkW/2/(来自马特的小提琴)

你只需要存储一个元素的"发光".和拉斐尔一样,元素有一个.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();
    });
Run Code Online (Sandbox Code Playgroud)