1

我有 2 个圆圈，单击大圆圈我正在使用类名找到小圆圈并尝试为小圆圈设置动画，但根本不起作用。

但是fadeId，fadeOut 属性正在工作。

我的功能：

var paper = new Raphael('myPaper',500,500);
var circle = paper.circle(100,100,100).attr({'fill':'red'});
circle.node.setAttribute('class','red');
var text = paper.text(100,100,"test Text").attr({'fill':'#fff'});

var smallCircle = paper.circle(300,100,50).attr({'fill':'green'}).data('id','green');
smallCircle.node.setAttribute('class','green'); 

var newSet = paper.set();

newSet.push(circle,text);

newSet.attr({cursor:'pointer'}).data('id','oval');

$('.red').on('click',function () {   
    $('.green').animate({'cx':200},5000); //animation not working.
} )

​</p>

jsfiddle在这里

4

3 回答 3

1

如果要使用 Raphael 制作动画，则需要获取元素的 Raphael 对象，而不是 jQuery 对象。为此，您需要raphaelid从元素中获取属性，然后使用getById画布的方法。

paper.getById($('.green')[0].raphaelid).animate({'cx': 200}, 5000);

如果您有多个元素，您可能只需循环遍历每个元素并为其设置动画。

var anim = Raphael.animation({'cx': 200}, 5000);
$('.green').each(function() {
    paper.getById(this.raphaelid).animate(anim);
}
于 2012-11-05T14:34:28.643 回答
0

animate()据我所知，仅更改元素的样式属性。

但是，您可以使用带有 animate 的 step 函数来挂钩它以更改其他内容：自定义值的 jQuery animate (not a CSS property)

于 2012-11-05T14:34:03.607 回答
0

看起来您正试图在 DOM SVG 对象上调用动画。您需要将 raphael 引用动画化到绿色圆圈，而不是类。

newSet.click(function () {   
    smallCircle.animate({'cx':200},5000); //animation not working.
} )

http://jsfiddle.net/Amb9b/8/

于 2012-11-05T14:35:45.943 回答