Question

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

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

提前致谢

在我尝试使用之前：

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

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

但它在加载页面之前会动画。

P.S。就此而言，我对JQuery或JavaScript不是很了解。

Answer 1

你可以试试这个：

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

只要页面加载完成就立即调用。

Answer 2

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

只需在$(document).ready()

上拨打电话即可

Answer 3

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

当时我想以某种方式将上一页信息传递给下一页，但我真正需要的是pushState API，也许还有像Angular或Vue这样的前端框架。

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

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

3 个答案: