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

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

1 个答案: