Javascript Raphael.js两个不同的动画，一个悬停

我正在用RaphaelJS绘制一张互动地图，效果很好，但我现在被卡住了。地图的每个区域都有一个标签，悬停时，路径需要填充，标签需要更改颜色

我已经触发了动画来填充区域，我也可以用同样的函数来设置文本的动画，但是，当你将鼠标移到文本上时，它会将其视为区域上的鼠标。所以我需要他们一起制作动画

我一直在尝试使用set，但我不确定它应该如何工作，到目前为止我的尝试都没有成功。这里有一些代码

我的路径和文本都是这样重复的：

var text_1808 = rsr.set();
text_1808.push(rsr.text(0, 0, '1808'));
text_1808.attr({
  fill: '#0A4E74',
  "font-family": 'source-sans-pro',
  "font-size": '14.9932',
  'stroke-width': '0',
  'stroke-opacity': '1',
  parent: 'text_1808'
});
text_1808.transform("m0.9587 0 0 1 194.3486 207.7305").data('id', 'text_1808');

var path_1808 = rsr.set();
path_1808.push(rsr.path("M 204.229,244.362 204.229,227.229   182.418,227.229 182.418,170.131 196.231,170.131 196.231,159.05 190.202,159.05 190.202,146.476 223.082,146.476 223.082,153.354   222.255,153.354 222.255,175.604 246.281,175.604 246.281,244.362  z"));
path_1808.attr({
  fill: '#ffffff',
  stroke: '#0A4E74',
  parent: 'suite_1808',
  "stroke-linecap": 'round',
  "stroke-linejoin": 'round',
  'stroke-width': '1',
  'stroke-opacity': '1'
}).data('id', 'path_1808');

然后我这样叫动画

var suites = [path_q, path_r, path_s, path_t, path_u, path_1808, path_w];
var labels = [text_1808, text_ac, text_ad, text_ae, text_af, text_ag, text_ah];

for (i = 0; i <= suites.length; i++) {
el = suites[i];

if(el !== undefined){

    el.mouseover(function() {
         this.animate({ cursor: 'pointer', fill: '#0A4E74' }, 200); 
     });

    el.mouseout(function() { 
         this.animate({ fill: '#ffffff' }, 200); 
     });

    el.click(function() { 
         this.animate({ fill: '#EC008C' }, 200); 
     });

}

var套件=[path_q，path_r，path_s，path_t，path_，path_1808，path_w]；
变量标签=[text_1808，text_ac，text_ad，text_ae，text_af，text_ag，text_ah]；
对于（i=0；i集合有时对我发现的事件有点复杂。您可以将一个id设置为另一个id，然后使用该id，并将两个动画设置在一起（这可能取决于最终解决方案的复杂程度）。我也会在描述中称集合为集合，而不是文本，否则会有点混乱。下面是一个可能有效的示例…fiddle在这里

var text_1808=rsr.text（50,50，'1808'）；
text_1808.id='text_1808'；
var set_1808=rsr.set（）；///为批次使用一个集合，这对于以后的操作可能很方便，而不是为每个对象使用一个集合，除非您将添加到这些集合中。
text_1808.attr({
“填充”：“0A4E74”，
“字体系列”：“source sans pro”，
“字体大小”：“14.9932”，
“笔划宽度”：“0”，
“笔划不透明度”：“1”，
家长：'text_1808'
});
文本_1808.变换（“m0.9587 0 0 1 194.3486 207.7305”）；
设置_1808.push（文本_1808）；
var path_1808=rsr.path（“M 204.229244.362 204.229227.229 182.418227.229 182.418170.131 196.231170.131 196.231159.05 190.202159.05 190.202146.476 223.082146.476 223.082153.354 222.255153.354 222.255175.604 246.281175.281244.362 z”）；
path_1808.id='path_1808'；
路径_1808.attr({
填写：“#ffffff”，
笔划：“#0A4E74”，
家长：“suite_1808”，
“笔划线头”：“圆形”，
“笔划线条连接”：“圆形”，
“笔划宽度”：“1”，
“笔划不透明度”：“1”
}).数据（'textid'，'text1808'）；
设置_1808.push（路径_1808）；
var套件=[path_1808]；
//变量标签=[text_1808]；
对于（i=0；我啊哈好的！谢谢老兄。现在看起来很容易，但我很难看到它像这样。我会在完成后更新我的代码，因为我计划尽可能多地抽象它。谢谢！
var text_1808 = rsr.text(50, 50, '1808');
text_1808.id = 'text_1808';
var set_1808 = rsr.set();  ///use one set for the lot, could be handy for manipulation later, rather than one set for each object, unless you will add to those.

text_1808.attr({
  'fill': '#0A4E74',
  "font-family": 'source-sans-pro',
  "font-size": '14.9932',
  'stroke-width': '0',
  'stroke-opacity': '1',
  parent: 'text_1808' 
});
text_1808.transform("m0.9587 0 0 1 194.3486 207.7305");

set_1808.push( text_1808 );


var path_1808 = rsr.path("M 204.229,244.362 204.229,227.229   182.418,227.229    182.418,170.131 196.231,170.131 196.231,159.05 190.202,159.05 190.202,146.476 223.082,146.476 223.082,153.354   222.255,153.354 222.255,175.604 246.281,175.604 246.281,244.362  z");
path_1808.id = 'path_1808';
path_1808.attr({
  fill: '#ffffff',
  stroke: '#0A4E74',
  parent: 'suite_1808',
  "stroke-linecap": 'round',
  "stroke-linejoin": 'round',
  'stroke-width': '1',
  'stroke-opacity': '1'
}).data( 'textid', 'text_1808' );
set_1808.push ( path_1808 );

var suites = [path_1808];
//var labels = [text_1808];

for (i = 0; i <= suites.length; i++) {
    el = suites[i];

    if(el !== undefined){

        el.mouseover(function() {
           this.animate({ cursor: 'pointer', fill: '#0A4E74' }, 200); 
           rsr.getById( this.data('textid') ).animate({ fill: '#0A4E74' }, 20);
        });

        el.mouseout(function() { 
            this.animate({ fill: '#ffffff' }, 200); 
            rsr.getById( this.data('textid') ).animate({ fill: '#0A4E74' }, 20);
        });

        el.click(function() { 
             this.animate({ fill: '#EC008C' }, 200); 
             rsr.getById( this.data('textid') ).animate({ fill: '#EC008C' }, 20);
        });

    }
}