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并在动画运行时每1ms触发一次事件。也许它会滞后，正如我所说它不是一个最好的实践解决方案。

var timer;

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