Is there a way to make element fade in or fade out using Raphael.js? My code is something like:

var elem = paper.circle(10, 10, 10)
elem.hide();

Is there an attribute to .hide() to make fade effect, something like:

var elem = paper.circle(10, 10, 10)
elem.hide({'duration':5000});

Is there a way to make element fade in or fade out using Raphael.js? My code is something like:

var elem = paper.circle(10, 10, 10)
elem.hide();

Is there an attribute to .hide() to make fade effect, something like:

var elem = paper.circle(10, 10, 10)
elem.hide({'duration':5000});

• javascript
• raphael
• fade

2 Answers 2

You can animate opacity for fade effect

var elem = paper.circle(10, 10, 10);
elem.animate({ opacity : 0 }, 1000, function () { this.hide() });

To fadeIn,

elem.show().animate({ opacity : 1 }, 1000);

You can do it without animations also: http://jsfiddle/3jsFe/1/

You need to take the elem.node

$(elem.node).fadeOut(2000, function() {
    $(elem.node).fadeIn(2000);
});