Can anyone clarify Raphael's documentation? (or know the place where someone has already done this)

Question

I work with Raphael and I think that I use it so as not to use some features that seem useful.

For example, I'm trying to add a listener to a Set (a group of elements), so that on the mouse over any of these elements, the script starts the animation in the entire set.

When you add a listener to a set, Raphael adds a listener to each of the elements and animates them separately.

As you see in this example http://jsfiddle.net/4VYHe/3/ , in which I want all the rectangles in one set (set = horizontal groups of 10 rectangles), change the color attribute on the mouse over any of them.

I found several methods in the raphael documentation that I think should help achieve this. But it's hard for me to understand how these methods work.

For instance:

• eve object ( http://raphaeljs.com/reference.html#eve )
• Element.animateWith () method ( http://raphaeljs.com/reference.html#Element.animateWith )
• Raphael.animation () method ( http://raphaeljs.com/reference.html#Raphael.animation )

The Raphael library seems to be very powerful, and I really want it to work correctly, I don’t want to write all kinds of different javascript hacks, because I think these tools should get the job in a more elegant way.

If you think that I am using the wrong library, I will still be open to all the tips. Thank you in advance.

--- EDIT ---

This is a working example ( http://jsfiddle.net/4VYHe/6/ ). But this is a hack with a lack of efficiency and elegance. I want something that uses the right tools correctly.

There is information on this page. http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2#PAGETOP A few examples, but nothing that explains how everything works in Raphael.

Answer 1

Take a look at this fiddle , I think it does what you are looking for. The main difference is that you want to name the animation on the set, not this . It seems that when you add a handler to the set, this refers to the individual elements in the set (which iterations are assigned to the handler), and not to the set itself.

Note that I pulled the handler functions into the getHoverHandler function:

 function getHoverHandler(fillColor) { var cSet = set; return function(){ cSet.animate({fill: fillColor}, 300); }; } set.hover(getHoverHandler('#000'), getHoverHandler('#FFF')); 

to break the circuit. If you try to do it like this:

 set.hover(function(){ set.animate({fill: '#000'}, 300) }, function(){ set.animate({fill: '#FFF'}, 300) }); 

when you go through the loop, the set will continue to change, and closing will maintain an understanding of this. As a result, all handlers will act on the last line of the boxes.

If you do not understand javascript closure, you can see this article. This is an old but fairly simple language, and it helped me when I tried to circle around me.

Answer 2

Kreek is absolutely right in this comment above. Kits are a workaround for inconsistencies between SVG and VML.

In the above example, you ran into the same problem that you encountered in the previous question . Using this in an anonymous function will almost always not work as you expect, since this one will not refer to what you think. Check out this discussion , especially the first two comments in the comments section. (As an aside, the commentator uses “I” as a reference to “this”, which is much better than my “this”, which shows that always someone does it better than you do)

In any case, bearing in mind, I cloned your violin, wrapped your set in an object, and put the events in the constructor of the object. Thus, the event can then refer to that.set and simultaneously animate all the objects in the set.

This is a small but fundamental concept that will help you with any Raphael (or javascript) development you make.

This does not answer your question directly, but hopefully clarifies some of the problems that you seem to be opening up. I cannot comment on the mentioned animation calls, but I think that Raphael as a library is definitely worth the persistence.

N.