With Highmaps, why is the callback in my jQuery fadein happening prior to the fade completing?

Question

I have a HighMap with a pair of buttons that are used to change between datasets - this is working as intended. I wanted to add a fade so that the switch between the datasets is smooth. However the map seems to be updating the data prior to the fadeout completing, despite happening within the callback function of the fade.

Here's the relevant bit of code with the buttons:

var resetMap = function(dataCurrent) {
SetOptions(dataCurrent);
AccessMap.update({title: {text: dataTitle}});
AccessMap.update({colorAxis: {max: dataMax, min: dataMin, minColor: dataMinColor, maxColor: dataMaxColor,type: dataScale}});
AccessMap.update({series:[{name: dataTitle,tooltip:{ valueSuffix: dataTooltipSuffix}}]});
AccessMap.series[0].setData(dataCurrent.slice());
};

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

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

A simplified version of my full working map (which includes the setOptions function referenced in that snippet) is here:

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

Answer 1

You are executing resetMap in place, not passing a function reference. You also probably want to run the fadeIn inside the callback as well:

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