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

【问题标题】：Using Highmaps, how can I use jQuery fadeIn/fadeOut to fade the data while keeping the map visible?使用 Highmaps，如何使用 jQuery fadeIn/fadeOut 淡化数据，同时保持地图可见？
【发布时间】：2017-10-10 14:12:54
【问题描述】：

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

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

这里是我淡化容器的地方：

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

这没关系，但我想在数据集之间淡入淡出时保持底图完全可见。我考虑在下面堆叠的 div 中添加一个空地图作为虚拟对象，但该解决方案似乎有点笨拙。我会很感激任何想法。

【问题讨论】：

标签： javascript jquery highcharts fadein highmaps

【解决方案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，在这种情况下，点下方的背景是可见的（灰色）。

【讨论】：