Raphael.js - can I use .show/.hide with fade effect?

Question

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

Jashwant · Answer 1 · 2013-05-07T08:15:27.783

13

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

edited May 07 '13 at 08:15

answered May 07 '13 at 08:01

Jashwant

score 4 · Answer 2 · answered May 07 '13 at 08:21

4

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

You need to take the elem.node

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

answered May 07 '13 at 08:21

So, `elem.node` selects the xml node and then you can use jQuery over that ? +1 – Jashwant May 07 '13 at 08:37
Yes, you can use jQuery for fade's, animations, and everything else what jQuery does. Using `elem.node` you take the node element and you can manipulate with it. You also could use (like Jashwant answered) [elem.animate](http://raphaeljs.com/reference.html#Element.animate) but I prefer jQuery because I'm already used to it. :) – Ron van der Heijden May 07 '13 at 08:54

2 Answers2