Having trouble animating SVG rect's opacity using Raphael

I'm using the Raphael library and trying to animate the opacity of a rectangle from 0 to 1.

Here's the code I've written:

    this.myRect.attr( 'opacity', 0);
    this.myRect.animate({opacity: 1}, 1000);

This does not work, and I believe it's开发者_StackOverflow the animation line which is incorrect as I can set the initial attribute to a lower value and it is noticeable when I run the script.

Any ideas?

I know this is old, but I just figured this out after running into it myself. the property is "fill-opacity" not fill. so use

     node.animate({ "fill-opacity": "0.9" }, 200);

$('#'+this.Myrect.node.id).animate({opacity: 1}, 1000);

try this way

It seems to me that the issue with your code stems from using this.myrect.. I'm assuming that you have declared myRect as paper.rect(...), if so why would you need to use this.

Have a look at this quick JsFiddle I mocked up it basically it demonstrates that you should use rect.animate()(or indeed some other element) but not this. From my personal experience this is used when attaching events to objects.