使用“attr”与“animate”使用节点ID更改Raphael对象

时间:2012-06-07 14:37:57

标签: javascript raphael

我正在构建一个应用程序,它使用Raphael根据从json feed读取的值在地图上绘制圆圈。每个圆形节点都会获得一个ID,然后我用它来调用它并更改其属性。选择新变量会更改圆的大小和颜色。我可以使用JQuery的attr方法更改大小,但不能使用动画。

我为每个圈子分配了一个ID:

circle.raphael.node.id = [thisCircle]

我可以使用属性方法更改每个圆圈的大小和颜色,因此:

$(thisCircle).attr({
r : [new radius]
fill : [new color]
});

但我无法使用JQuery的animate方法为其设置动画:

$(thisCircle).animate({
r : [new radius],
fill : [new color]
}, 200);

我错过了什么?

2 个答案:

答案 0 :(得分:4)

为什么不通过它自己的animate方法为raphael对象设置动画? :

circle.animate({
    r : newRadius,
    fill : newColor
},200);

这是一个演示如何为raphael圆形对象设置动画的演示:

http://jsfiddle.net/gion_13/MpjGJ/


在同一个演示中,您将看到我添加了一个不必要的迷你jquery插件,它允许您通过本机jquery动画方法为raphael svg对象设置动画,如下所示:

$('#the-id-of-the-svg-node').animate({
    r : newRadius,
    fill : newColor
},200);

答案 1 :(得分:0)

尝试使用$('#'+thisCircle).animate...[thisCircle]是基础元素的id,为了将其传递给jQuery,您必须指定选择器来选择元素本身。