jQuery анимация высоты контейнера Google Map

Question

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

Я оживляю его высоту с помощью jQuery:

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

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

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

Теперь очевидная вещь заключается в том, чтобы сделать это в обратном вызове animate:

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