Shadi Almosri Shadi Almosri - 6 months ago 16
jQuery Question

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

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

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