En utilisant Highmaps, comment puis-je utiliser jQuery fadeIn/fadeOut pour fondre les données tout en gardant la carte visible?

Question

J'utilise jQuery fadeIn et fadeOut pour assurer une transition en douceur lors de la commutation entre deux jeux de données. Voici le fond de carte:

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

est ici où je fanent le contenant:

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

C'est OK, mais je voudrais garder la carte de base entièrement visible tout en fondu enchaîné entre les jeux de données. J'ai envisagé d'ajouter une carte vide dans un div empilé ci-dessous comme un mannequin, mais cette solution semble un peu maladroite. J'apprécierais des idées.

Answer 1

Ce morceau de code prend tous les points de la carte qui ont une valeur et les fane au blanc:

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

Un exemple concret de travail:https://jsfiddle.net/kkulig/kupyu65w/

Il utilise Highcharts Element.attr() fonction pour réglage des couleurs (http://api.highcharts.com/class-reference/Highcharts.SVGElement#attr)

La fonction de fondu peut être créée de manière analogique. Assurez-vous simplement que tous les points sont blancs au départ.

jQuery fadeOut La fonction n'est pas une solution ici car elle réduit l'opacité des éléments à 0 et dans ce cas l'arrière-plan sous le point est visible (couleur grisâtre).