jQuery увеличить размер контейнера Google Map

Question

У меня есть контейнер для карт DIV. Давайте назовем его #mapcontainer.

анимировать его высоту с JQuery:

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

Я знаю, что если карта изменении размеров контейнера Google Maps должен быть запущен, чтобы быть изменен с помощью:

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

Теперь очевидно, что это для этого в обратном вызове оживить:

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

Но это не выглядит гладко, а карта просто выглядит после того, как анимация завершилась.

Есть ли в любом случае, что карта может изменяться по мере того, как анимация работает, так что карта переходит плавно?

Answer 1

Вы запускаете событие после завершения анимации, и я думаю, что это проблема.

Это нехорошее решение, но, возможно, вы можете использовать setInterval и запускать событие каждые 1 мс при запуске анимации. Может быть, это будет отставать, и, как я сказал, это не лучшее решение.

var timer; 

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