我正在使用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>
Run Code Online (Sandbox Code Playgroud)
[一般来说,我不清楚以下两个变量之间的区别是什么:
var c = paper.circle(50, 75, 30); // Raphael circle
$("circle").first(); // using jQuery to grab that Raphael circle
Run Code Online (Sandbox Code Playgroud)
jQuery对象是Raphael圈子的包装器吗?]