jQuery 选择所有 SVG 路径并应用动画填充

Question

我有一个正在工作的国家/地区 map ，其中的区域在单击和悬停时会进行动画填充。每条路径单独工作。

我想添加一个全选/全部清除选项，将单击效果应用于所有路径。我创建了一个新的 div

<div id="selectAll">Click to Select All</div>

然后使用一些 jQuery

$('#selectAll').click(function(){
  $("[id^=Co]").animate({
         fill: '#698B22'
         }, 300);
});

选择器“[id^=Co]”可以到达所有路径，因为所有路径的id都以“Co”开头。该选择器也与我的每个区域的 qtip 完美配合。

我不确定我在这里做错了什么。任何指导都会有很大的帮助。蒂亚

Answer 1

添加 jquery.color 插件，然后在代码之前添加:

  jQuery.Color.hook( "fill stroke" );

然后你原来的动画函数就可以工作了

$('#selectAll').click(function(){
  $("[id^=Co]").animate({
         fill: '#698B22'
         }, 300);
});