如何調用jquery對象的raphael方法？

我使用拉斐爾創建了一些圈子。當用戶點擊一個按鈕時，我想爲這些圓圈添加動畫（通過增加它們的半徑）。我該怎麼做呢？如何調用jquery對象的raphael方法？

例如，這裏是我的示例代碼：

<!DOCTYPE html> 
<html> 

<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="raphael.js"></script> 
<script type="text/javascript"> 

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

}); 
</script> 
</head> 

<body> 
<div id="canvas_container"></div> 
<button>Click me to animate the circles</button> 
</body> 

</html>

[總的來說，我並不清楚什麼是以下兩個變量之間的差別：

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

是jQuery對象一圍繞拉斐爾圈？]

來源

2010-11-15 grautur

通過Raphaël Reference閱讀，似乎你可以用做拉斐爾自己Event methods

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

文檔的同一部分還注意到，您可以使用庫如jQuery，但是你必須通過在節點，就像這樣：

$(circle.node)

哪裏圈距離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); 
    }); 
});

來源

2010-11-15 02:39:01

很酷，謝謝。是的，那是有效的。我希望能夠訪問某種jQuery圈對象，這樣我就可以在我的動畫中使用jQuery的延遲函數，但也許這太麻煩了= \。 – grautur 2010-11-15 02:54:01

@grautur你可以使用'setTimeout'來做到這一點 – 2010-11-15 02:54:55

你的選擇器「圓圈」沒有針對任何東西 - 沒有你的目標圈子元素。但是，你可以這樣做：

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對象一起工作。

來源

2010-11-15 02:38:11

你是什麼意思，有沒有圈元素，我的目標？ – grautur 2010-11-15 02:42:30

@grautur這意味着jQuery不能直接選擇'circle'元素，並且在Raphaël自己的願望下使用jQuery的'animate'函數沒有意義。 – 2010-11-15 02:51:04

如何調用jquery對象的raphael方法？

回答

相關問題