使用Highmaps，如何使用jQuery fadeIn/fadeOut淡化数据，同时保持地图可见？

Question

我使用jQuery fadeIn和fadeOut在两个数据集之间切换时提供平滑过渡。这里的工作地图：

https://jsfiddle.net/MossTheTree/h5njdqLf/7/

此处，我褪去了容器：

$('#setdataPop').click(function() { 
$("#container").fadeOut(500, function() { resetMap(pop); $("#container").fadeIn(500); }); 
}); 

这是确定的，但我想，以保持底图是完全可见，而数据集之间的衰落。我曾考虑在下面的div中添加一个空白的地图作为虚拟，但是这个解决方案似乎有点笨拙。我会很感激任何想法。

Answer 1

这段代码通吃百分点，其中有一个价值和淡出他们到白地图：

var points = AccessMap.series[0].points, 
    iterations = 30, 
    iterationInterval = 20; 

points.forEach(function(p) { 

    if (!p.isNull) { 
    var rgb = p.color.split(',').map((s) => Number(s.replace(/\D/g, ''))), // convert from string to an array of numbers: [r, g, b] 
     steps = rgb.map((c) => Math.round((255 - c)/iterations)); // used to increment above values at each iteration 

    // launch animation 
    for (var i = 0; i < iterations; i++) { 
     setTimeout(function(_i, _rgb, _steps) { 
     if (p.graphic) { 

      // compute value for fill 
      var fill = 'rgb(' + _rgb.map(function(c, j) { 
      var val = c + _steps[j] * (_i + 1); 
      return val > 255 ? 255 : val; 
      }).join(',') + ')'; 

      // step may not be precise - make sure that final color is always white 
      if (_i + 1 === iterations) { 
      fill = 'white' 
      } 

      p.graphic.attr({ 
      fill: fill 
      }); 
     } 
     }, i * iterationInterval, i, rgb.slice(), steps.slice()); 
    } 
    } 
}); 

现场工作示例：https://jsfiddle.net/kkulig/kupyu65w/

它使用Highcharts为Element.attr()功能设置颜色（http://api.highcharts.com/class-reference/Highcharts.SVGElement#attr）

淡入功能可以类似地创建。只要确保所有点最初都是白色的。

jQuery fadeOut函数在这里不是一个解决方案，因为它将元素不透明度降低到0，在这种情况下，点下方的背景可见（浅灰色）。