Can Someone Clarify Raphael's Documentation? (or Know A Place In Which Someone Already Has Done It)

I´m working with Raphael, and I think that I´m using it in a way that does not take advantage of some features that seems to be useful. For example, I´m trying to add a listene

Solution 1:

Take a look at this fiddle, I think it is doing what you are looking for. The fundamental difference is that you want to call animate on the set, rather than this. It appears that when you add a handler to a set, this refers to the individual elements in the set (which are iterated over to assign the handler), and not the set itself.

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

functiongetHoverHandler(fillColor) {
     var cSet = set;

     returnfunction(){
          cSet.animate({fill: fillColor}, 300);
      };
}

set.hover(getHoverHandler('#000'),
          getHoverHandler('#FFF'));

in order to break the closure. If you try to do it like this:

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

as you loop through, set will keep changing, and the closures will maintain awareness of this. As a result, all handlers will be acting on the last row of boxes.

If you don't understand javascript closures, you might want to look at this article. It is old, but in pretty simple language, and it helped me as I have tried to get my head around them.

Solution 2:

Kreek is absolutely correct in this comment above. Sets are a workaround for the inconsistencies between SVG and VML.

In your example above, you're running into the same issue that you were facing in your previous question. Using this in an anonymous function will almost always not work in the way you expect, as this won't be referring to what you think it is. Have a look at this discussion, particularly the first two comments in the comments section. (As an aside, the commenter uses "self" as the reference to "this", which is much better than my "that", which goes to show there's always someone doing it better than yourself)

Anyway, with that in mind, I've cloned your fiddle, wrapped your set in an object, and put the events into the object constructor. By doing this, the event can then refer to that.set and animate all objects in the set at the same time.

It's a small but fundamental concept that will aid you throughout any Raphael (or javascript) development you do.

This doesn't answer your question directly, but hopefully clarifies some of the issues you seem to be discovering. I can't really comment on the animation calls you've mentioned, but I do think that Raphael as a library is definitely worth persevering with.

N.