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

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

Answer 2

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 3

Try this SO answer if you're looking for vanilla JS.

The transition listner events vary in each browser, so the below function will find which listener to use and return the correct one.

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

var transitionEnd = whichTransitionEvent();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

function theFunctionToInvoke(){
// set margin of div here
}