使用Highmaps，如何在保持地图可见的情况下使用jQuery fadeIn / fadeOut淡化数据？

Question

I'm using jQuery fadeIn and fadeOut to provide a smooth transition when switching between two datasets. Here's the working map:

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

Here's where I fade the container:

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

This is OK, but I'd like to keep the base map fully visible while fading between the datasets. I've considered adding an empty map in a div stacked below as a dummy, but that solution seems a bit clunky. I'd appreciate any ideas.

Answer 1

This piece of code takes all the points from the map which have a value and fades them out to white:

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());
    }
  }
});

Live working example: https://jsfiddle.net/kkulig/kupyu65w/

It uses Highcharts Element.attr() function for setting colors ( http://api.highcharts.com/class-reference/Highcharts.SVGElement#attr )

Fade in function can be created analogically. Just make sure that all the points are white initially.

jQuery fadeOut function is not a solution here because it decreases elements opacity to 0 and in this case the background underneath the point is visible (grayish color).