放慢我的JavaScript！如何讓我的代碼在執行之前等待轉換完成？

Question

奇怪的問題，我想，但我有這段代碼在我的網頁...

$(".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'); 
}); 

這工作fantasticly和做什麼，我想在功能上只是不UI明智的。這意味着首先做一個很好的轉換來隱藏div「map-holder」，渲染谷歌地圖，然後做一個很好的轉換。過渡是默認的JQuery顯示/隱藏。

現在我似乎得到的問題是，當這個$("#map-holder").hide('slow');仍在運行時，你正在呈現Google地圖，並且你在地圖隱藏之前看到地圖的一瞥，然後再次打開，這反映了整個效果。

因此，任何人都有任何想法，我可以放慢代碼，等待隱藏功能完成之前完成其餘的？ （理想情況下，我不想使用類似setTimeout的硬編碼）。

在此先感謝！

沙迪

更新1

我將回電話就躲功能，但它在GMAP一個很奇怪的效果。在Chrome/FF/Safari中，它只會在地圖的角落呈現一小段。而在IE中它完全被拋棄並且位於不同的位置。 GMap似乎不喜歡被隱藏在div中。

你可以在這裏看到它http://afid.staging.dante-studios.com/它在前面（只需點擊亞洲或非洲的播放按鈕即可看到奇怪的效果）。

有關如何解決此問題的任何想法？

更新2 試圖修復無法正常在一個隱藏的div使用該渲染的谷歌地圖的問題：

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

但可惜沒有運氣與map.checkResize();方法。有任何想法嗎？

Answer 1

使用callback to .hide動畫完成後執行工作：

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

    // ... 

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

Answer 2

你需要一個回調函數添加到隱藏功能，這將在運行時是做隱藏它：

$(".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

嘗試this SO回答如果你正在尋找香草JS。

轉換列表程序事件在每個瀏覽器中都不相同，所以下面的函數將查找使用哪個偵聽程序並返回正確的。

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 
}