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 "map-holder"を非表示にし、その中にgoogleマップをレンダリングしてから、サイズに戻すための適切な遷移を実行することを目的としています。遷移はデフォルトのJQueryの表示/非表示です。

今私が得ているように見える問題は、これがまだ実行されている間にGoogleマップがレンダリングされて$("#map-holder").hide('slow');おり、マップが非表示になり、次に再び開く前にマップがちらっと見えることです。これは、全体の効果に反します。

したがって、残りを実行する前に、hide関数が終了するのを待つためにコードを遅くする方法を誰かが知っていますか？（理想的には、setTimeoutのようにハードコードされたものを使用したくありません）。

前もって感謝します！

シャディ

更新1

私はhide関数にコールバックをかけましたが、それはGMapに非常に奇妙な影響を及ぼします。Chrome / FF / Safariでは、表示されたときにマップの隅に小さなセグメントのみがレンダリングされます。IEでは、完全に破棄され、別の場所に集中します。GMapは、非表示のdivでレンダリングされることを好まないようです。

ここでそれを見ることができますhttp://afid.staging.dante-studios.com/それは正面にあります（奇妙な効果を見るためにアジアまたはアフリカの再生ボタンを押すだけです）。

これを解決する方法について何かアイデアはありますか？

UPDATE 2 これを使用して、非表示のdivで正しくレンダリングされないというGoogleマップの問題を修正しようとしました。

$(".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 に答える