如有必要，使用 Jquery 在页面加载后更改 div 高度答案

【问题标题】：Changing div height after page loads if necessary with Jquery如有必要，使用 Jquery 在页面加载后更改 div 高度
【发布时间】：2011-09-16 06:05:01
【问题描述】：

例如我有 3 页：
第1页与<div id="header" height="460">，
第2页与<div id="header" height="100">，
第 3 页，<div id="header" height="100">。

在第一页上，我将高度设置为 460 像素，但是当我将其更改为任何其他页面（例如 page2）时，它应该加载该页面，然后将其从 460 像素设置为 100 像素，之后如果我点击 page3我希望它能够识别它已经设置为 100 像素并且不需要动画，但是如果我点击返回第 1 页，它将加载第 1 页并动画回到 460 像素的高度。

提前致谢

在我尝试使用它之前：

$('#buttonToPage2').click(function(){
    $('#header').animate({height:'100px'}, 500);
});

$('#buttonToPage1').click(function(){
    $('#header').animate({height: '460px'}, 500);
});

但它会在加载页面之前进行动画处理。

附：我对 JQuery 或 JavaScript 不太熟悉。

【问题讨论】：

你自己试过了吗？你有什么代码？
当你说动画时，你的意思是慢慢地？
当然，当您加载每个页面时，div 将具有您想要的高度。也许我误解了你的要求？
@bulugabob 我认为他想要实现的是根据 DIV[id=header] 中的高度属性在当前页面上为 DIV[id=header] 设置动画上一页
@manraj82 没错，但是如果在上一页我的高度相同，您将看不到动画。我希望我说得清楚一些。

标签： javascript animation height

【解决方案1】：

这是一个非常古老的问题。当时我对 AJAX 并不熟悉。我想要从一页到另一页的平滑过渡。

当时我不知何故想将上一页信息传递给下一页，但我真正需要的是 pushState API，也许还需要一个前端框架，如 Angular 或 Vue。

对于较小的页面，我现在使用 Page.js 来管理状态和 Pug.js 模板引擎，但您可以使用 Mustache、Hogan.js 或其他模板引擎。这样您就可以使用 JavaScript 进行转换，而无需重新加载页面。

【讨论】：

【解决方案2】：

$(#header).height(100).slideUp();
$(#header).height(460).slideDown();

请致电$(document).ready()

【讨论】：

【解决方案3】：

你可以试试这个：

$('#header').animate({
    height: '100px'
 }, 5000, function() {
    // Animation complete.
});

页面加载完成后立即调用它。

【讨论】：