Slow down my javascript! How to allow my code to wait for transition to complete before executing?

Question

Strange Question i guess but i have this bit of code in my page...

$(".map-overlay-left").click(function () { 
 $("#map-holder").hide('slow');         
 var gmarkers = [];
 var side_bar_html = "";

 var map = new GMap2(document.getElementById('map-holder'));
 map.addControl(new GSmallMapControl());
 map.addControl(new GMapTypeControl());
 var Africa = new GLatLng(-2.767478,23.730469);
 map.setCenter(Africa, 4); 

 $.get("http://xx.xxx.xxxx.xxx/xml-feed-google-maps",{},function(xml) {
  $('marker',xml).each(function(i) {
   html = $(this).text();
   lat = $(this).attr("lat");
   lng = $(this).attr("lng");
   label = $(this).attr("label");
   var point = new GLatLng(lat,lng);
   var marker = createMarker(point,label,html);
   map.addOverlay(marker);
  });
 });

 $("#map-holder").show('slow');
});

This works fantasticly and does what i want functionally just not UI wise. It's meant to first do a nice transition to hide the div "map-holder", render the google map inside it, then do a nice transition back to size. The transition is the default JQuery show/hide.

Now the problem i seem to be getting is that the Google Map is being rendered while this $("#map-holder").hide('slow'); is still running and you see a glimps of the map before it hides, and then opens up again, which kinda defies the whole effect.

Thus anyone have any idea how i can slow the code down to wait for the hide function to finish before doing the rest? ( ideally i don't want to use something hard coded in like setTimeout).

Thanks in advance!

Shadi

UPDATE 1

I've placing a call back on the hide function but it has a very strange effect on GMap. In Chrome/FF/Safari it then only renders a small segment in the corner of the map when it shows up. and in IE it is completely thrown off and centers on a different location. the GMap seems not to like being rendered in a hidden div.

You can see it here http://afid.staging.dante-studios.com/ it's on the front (just hit the play button on Asia or Africa to see the weird effect).

Any ideas on how to resolve this?

UPDATE 2 Attempted to fix the Google Map issue of not rendering correctly in a hidden div with this:

$(".map-overlay-left").click(function () { 
 $("#map-holder").hide('slow', function(){         
  var gmarkers = [];
  var side_bar_html = "";

  var map = new GMap2(document.getElementById('map-holder'));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  var Africa = new GLatLng(-2.767478,23.730469);
  map.setCenter(Africa, 4); 

  $.get("http://afid.staging.dante-studios.com/xml-feed-google-maps",{},function(xml) {
   $('marker',xml).each(function(i) {
    html = $(this).text();
    lat = $(this).attr("lat");
    lng = $(this).attr("lng");
    label = $(this).attr("label");
    var point = new GLatLng(lat,lng);
    var marker = createMarker(point,label,html);
    map.addOverlay(marker);
   });
  });

 });
 $("#map-holder").show('slow');
 map.checkResize();
 map.setCenter(Africa, 4); 
});

But alas no luck with the map.checkResize(); method. Any ideas?

Answer 1

you need to add a callback function to the hide function, which will run when it is done hiding it:

$(".map-overlay-left").click(function () {      
    $("#map-holder").hide('slow', function(){                                                                  
     var gmarkers = [];
     var side_bar_html = "";

     var map = new GMap2(document.getElementById('map-holder'));
     map.addControl(new GSmallMapControl());
     map.addControl(new GMapTypeControl());
     var Africa = new GLatLng(-2.767478,23.730469);
     map.setCenter(Africa, 4);       

     $.get("http://afid.staging.dante-studios.com/xml-feed-google-maps",{},function(xml) {
      $('marker',xml).each(function(i) {
       html = $(this).text();
       lat = $(this).attr("lat");
       lng = $(this).attr("lng");
       label = $(this).attr("label");
       var point = new GLatLng(lat,lng);
       var marker = createMarker(point,label,html);
       map.addOverlay(marker);
       //alert(lat + " " + lng + " " + label);
      });
     });

     $("#map-holder").show('slow');
    });
});

Answer 2

Use the callback to .hide to perform your work after the animation is complete:

$("#map-holder").hide('slow', function() {
  var gmarkers = [];
  var side_bar_html = "";      

  // ...

  $("#map-holder").show('slow');
})