Problems with animating SVG transparency using Raphael

Question

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

Here is the code I wrote:

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

This does not work, and I believe that the animation string is incorrect, since I can set the initial attribute to a lower value, and this is noticeable when I run the script.

Any ideas?

Answer 1

I know this is out of date, but I just figured it out when I came across this myself. the fill-opacity property is not filled. so use

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

Answer 2

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

try this way

Answer 3

It seems to me that the problem with your code is related to using this.myrect. . I assume you declared myRect as paper.rect(...) , if so, why would you use this .

Take a look at this quick JsFiddle that I mocked . This basically demonstrates that you should use rect.animate() (or really some other element) but not this . From my personal experience, this used when attaching events to objects.