jquery 动画高度在谷歌地图控件中不起作用

Question

我正在尝试为 Google 地图 v3 创建自己的控件。单击控制按钮时，会将地图 div 在页面上移至更高位置并扩展地图高度。 （是的，这类似于 Google 地图的全屏功能，但我的地图通过 ScrollTrigger 固定在页面底部，当用户单击最小化按钮时，地图就会消失。所以我正在制作自己的控件来处理我在哪里希望地图在最小化时出现。）

这是我的演示的链接： https://newsinteractive.post-gazette.com/.demo/test.php

自定义控件的代码为：

function createexpandControl(map) {
      const controlButton = document.createElement("button");

      // Set CSS for the control.
      controlButton.style.backgroundColor = "#fff";
      controlButton.style.border = "2px solid #fff";
      controlButton.style.borderRadius = "3px";
      controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
      controlButton.style.color = "rgb(25,25,25)";
      controlButton.style.cursor = "pointer";
      controlButton.style.fontFamily = "Arial,sans-serif";
      controlButton.style.fontSize = "16px";
      controlButton.style.lineHeight = "38px";
      controlButton.style.margin = "8px 0 22px";
      controlButton.style.padding = "0 5px";
      controlButton.style.textAlign = "center";
      controlButton.textContent = "Expand Map";
      controlButton.title = "Click to expand the map";
      controlButton.type = "button";
      // Setup the click event listeners
      controlButton.addEventListener("click", () => {
        
        $( "#map" ).animate({
            'height': '+=800px', //this does not work
            'top': '25vh', //this works
            'left': '0' //this works
          }, 1000);
        });
      return controlButton;
    }

对宽度进行动画处理可以，但不能对高度进行动画处理。我尝试过设置

'height': '800px'

但这也不起作用。

请问大家有什么建议吗？

Answer 1

在检查演示时，我发现 max-height 设置为 210px，这限制了高度的扩展。这是更新后的脚本：

controlButton.addEventListener("click", () => {
    $("#map").css("max-height", "none");

    $( "#map" ).animate({
        'height': '+=800px',
        'top': '25vh',
        'left': '0'
      }, 1000);
    });
  return controlButton;
}