ハイマップを使用すると、jQuery fadeIn/fadeOutを使用してマップを表示したままデータをフェードインする方法はありますか？

Question

jQuery fadeInとfadeOutを使用して、2つのデータセットを切り替えるときのスムーズな切り替えを提供しています。ここでは作業マップだ：

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

私はコンテナをフェードのはここです：

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

これはOKですが、私は、データセット間のフェージングながら完全に見えるベースマップを維持したいと思います。私はダミーとして下に積み重なった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に下げるため、この場合はポイントの下の背景が灰色の色で表示されるため、関数はここでの解決方法ではありません。