如何在jquery对象上调用raphael方法？

我正在使用Raphael创建一些圈子。 当用户单击按钮时，我想为这些圆圈设置动画（通过增加它们的半径）。 我该怎么做呢？

例如，这是我的示例代码：

      $(function() { var paper = new Raphael("canvas_container", 300, 150); paper.circle(50, 75, 30); paper.circle(150, 75, 30); $("button").click(function() { $("circle").each(function(i) { this.animate({ r: 100 }, 500); // Doesn't work. }); }); });    
 Click me to animate the circles   

[一般来说，我不清楚以下两个变量之间的区别是什么：

 var c = paper.circle(50, 75, 30); // Raphael circle $("circle").first(); // using jQuery to grab that Raphael circle 

jQuery对象是Raphael圈子的包装器吗？]

Answer 1

通过RaphaëlReference阅读，似乎你可以使用Raphaël自己的Event方法来做到这一点

 circle.click(function (event) { this.animate({ r: 100 }, 500); }); 

文档的相同部分还指出您可以使用像jQuery这样的库，但是您必须传入节点，如下所示：

 $(circle.node) 

其中circle是paper.circle调用返回的对象。

但是，在您的情况下，我认为以下代码将起作用：

 var paper = new Raphael("canvas_container", 300, 150), circles = []; circles.push(paper.circle(50, 75, 30)); circles.push(paper.circle(150, 75, 30)); $("button").click(function() { $.each(circles, function(i, c){ c.animate({ r: 100 }, 500); }); }); 

Answer 2

您的选择器“圈子”没有定位任何内容 – 您没有可​​以定位的圈子元素。 但是，你可以这样做：

 circle1 = paper.circle(50, 75, 30); circle2 = paper.circle(150, 75, 30); $("button").click(function() { circle1.animate({ r: 100 }, 500); circle2.animate({ r: 100 }, 500); }); 

我无法告诉你是否可以根据半径为圆圈设置动画（），但至少可以为你提供一个jQuery对象。