1

大きな円をクリックすると、クラス名を使用して小さな円を見つけ、小さな円をアニメーション化しようとしていますが、まったく機能しません。

しかし、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 を使用してアニメーション化する場合は、jQuery オブジェクトではなく、要素の Raphael オブジェクトを取得する必要があります。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

DOM SVG オブジェクトで animate を呼び出そうとしているようです。クラスではなく、緑色の円への raphael 参照をアニメーション化する必要があります。

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

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

于 2012-11-05T14:35:45.943 に答える
0

animate()私が見た限り、要素のスタイル属性のみを変更します。

ただし、animate でステップ関数を使用して、他のものを変更するためにフックすることができます:カスタム値の jQuery animate (CSS プロパティではない)

于 2012-11-05T14:34:03.607 に答える