Question

I am trying to construct a customized map in raphaeljs, in this i want do is, making it like a fadein fadeout effect of the countries that appear sequentially, for it i have used setInterval() Event…

I have tried some stuff right here but it manages to show the last item, it fadein fadeout…
I want to show that sequentially…. Can anyone help???

Here is the sample:-

http://jsfiddle.net/vpmzT/

Answer 1

There’re several issues here, the first one @JSantos has already pointed out: you set all the states to blink simultaneously, which is probably not the intended behavior.
Second problem is that the current variable, as well as the intervalFunctions, is shared, and therefore get assigned a new value for each state. This is why you get only the last state in the list to actually perform the animation — by the time the animation starts the intervalFunctions array contains the animation functions for the last state.

There’re multiple possible ways of working around this, but generally you’ll have to schedule the animations to run sequentially by using setTimeout(setInterval(animation_function(), total_interval), delay). One possible (though not very readable) way of doing that is http://jsfiddle.net/uTtaP/28/