Hover Function Not Working On Rapael.js Objects From an Array
Using Raphael.js 2.1.0 I am trying to create circle objects on the Canvas from an array of coordinates by using this code:
- var map = Raphael('canvas', 500, 500);
- var coords = [ [150,50], [20,85], [350,95] ];
- var circle;
- for(var i = 0; i < coords.length; i++){
- circle = map.circle(coords[i][0], coords[i][1], 20);
- circle.toFront();
- circle.attr({
- fill: '#98ED00',
- translation: "4,4",
- stroke: '#FFF',
- 'stroke-width': 4,
- opacity: 1,
- });
- }
- circle.hover(
- function () {
- circle.animate({
- fill: 'red',
- opacity: 1,
- map: 30,
- 'stroke-width': 4
- }, 300);
- }, function () {
- circle.animate({
- fill: '#98ED00',
- opacity: 1,
- 'stroke-width': 4,
- map: 20
- }, 300);
- });
but the hover function ONLY functioning on the LAST created object! Can you please let me know how I can fix this issue?
Thanks