Question

我得到了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.
} )

jsfiddle here

Answer 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);
}

Answer 2

就我所见，

animate()仅更改元素的style属性。

但是，您可以使用带有动画的步骤函数来挂钩以更改其他内容：jQuery animate of custom value (not a CSS property)

Answer 3

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

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

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

我正在使用类名和动画找到Raphael对象，但根本不工作

3 个答案: