Google MapコンテナのjQueryアニメーションの高さ

Question

私はマップコンテナDIVを持っています。それを#mapcontainerと呼ぶことができます。

私はjQueryを使ってその高さをアニメーション化：

$("#mapcontainer").animate({height: +=200px}, 500); 

私はマップ・コンテナのサイズが変更された場合、Googleマップを使用してサイズを変更するようにトリガする必要があることを知っている：

google.maps.event.trigger(map, 'resize'); 

今明白なことですアニメーションのコールバックでこれを行う：

$("#mapcontainer").animate({height: +=200px}, 500, "linear", function(){ 
    google.maps.event.trigger(map, 'resize'); 
}); 

しかし、これはスムーズに見えず、マップはちょうどアニメーションが完了した後、高さにジャンプします。

アニメーションが実行されているときに地図のサイズを変更できるため、地図がスムーズに移行しますか？

Answer 1

アニメーションが完了した後でイベントをトリガーすると、それが問題だと思います。

これは良い解決策ではありませんが、アニメーションが実行されているときにsetIntervalを使用してイベントを1msごとにトリガーすることができます。多分それは遅れをとるだろう、と私は最高の実用的な解決策ではないと言った。

var timer; 

timer = setInterval(function(){ google.maps.event.trigger(map, 'resize')}, 100); 
$("#mapcontainer").animate({height: +=200px}, 500, "linear", function(){ 
    timerMap = clearInterval(timer); 
});