如何在 jQuery 中同时更改 div 高度和动画滚动位置答案

【问题标题】：How to change div height and animate scroll position simultaneously in jQuery如何在 jQuery 中同时更改 div 高度和动画滚动位置
【发布时间】：2015-07-15 17:26:45
【问题描述】：

我试图通过动画高度和移动页面来显示一个带有地图的 div（以前设置为 display:none 和一个设置的高度），以便 div 完全可见。这可行，但它分两个步骤发生 - 我希望它同时进行。（被注释掉的行是一种行不通的尝试）。

有什么想法吗？

$( "#map" ).animate({
    height:"show"
    //scrollTop: $(this).get(0).scrollHeight
    },400,"swing", function(){
    $('html, body').animate({scrollTop: $("#map")[0].scrollHeight },400);
});

【问题讨论】：

标签： jquery position jquery-animate height scrolltop

【解决方案1】：

首先，不需要第二个动画调用。您已将其包装在一个函数中，该函数在第一个动画完成时执行。它永远不会以这种方式同时运行。

试试下面的代码：

$( "#map" )
        .animate(
        {   height:"show",
            scrollTop: 400
        },400,"swing");
    });

我在本地环境中运行此代码，我的地图 div 的内容滚动到指定的位置，同时高度扩展。

祝你好运！

【讨论】：

不，可悲的是，这对我没有任何作用。但要澄清一下，这是我想要浏览的页面，而不是其他所有内容之上的 div。我知道为什么它们不同步，但当然它在两个步骤中看起来很笨重。感谢您的建议

【解决方案2】：

似乎已修复 - 这可以同步工作：

$("html, body").animate({ scrollTop: 300 }, 3000);
$( "#map" ).animate({
    height:"show"
    },3000,"swing", function(){
    do more stuff for Google map
});

【讨论】：