3

我想奇怪的问题，但我的页面中有这段代码......

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

这非常有效，并且在功能上做了我想要的，而不是 UI 明智的。它的意思是首先做一个很好的过渡来隐藏 div“地图持有者”，在其中渲染谷歌地图，然后做一个很好的过渡回到大小。过渡是默认的 JQuery 显示/隐藏。

现在我似乎遇到的问题是，谷歌地图正在渲染，而它$("#map-holder").hide('slow');仍在运行，你会在地图隐藏之前看到地图的一瞥，然后再次打开，这有点违背整体效果。

因此，任何人都知道如何减慢代码速度以等待隐藏功能完成，然后再进行其余操作？（理想情况下，我不想使用像 setTimeout 这样硬编码的东西）。

提前致谢！

沙迪

更新 1

我已经对隐藏功能进行了回调，但它对 GMap 有非常奇怪的影响。在 Chrome/FF/Safari 中，当它出现时，它只会在地图的角落呈现一小段。在 IE 中，它完全被抛弃并集中在不同的位置。GMap 似乎不喜欢在隐藏的 div 中呈现。

你可以在这里看到它http://afid.staging.dante-studios.com/它在前面（只需点击亚洲或非洲的播放按钮即可看到奇怪的效果）。

关于如何解决这个问题的任何想法？

更新 2 尝试修复 Google Map 无法在隐藏 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();方法没有运气。有任何想法吗？

4

3 回答 3

4

动画完成后使用回调来执行你的工作：.hide

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

  // ...

  $("#map-holder").show('slow');
})
于 2009-12-14T23:34:37.110 回答
1

您需要向 hide 函数添加一个回调函数，该函数将在隐藏完成后运行：

$(".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');
    });
});
于 2009-12-14T23:34:35.860 回答
0

如果您正在寻找香草 JS，请尝试这个SO 答案。

每个浏览器的转换监听器事件都不同，因此下面的函数将找到要使用的监听器并返回正确的监听器。

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
}
于 2016-06-09T12:57:59.873 回答