Changing div height after page loads if necessary with Jquery

For example I have 3 pages:

page1 with <div id="header" height="460">,

page2 with <div id="header" height="100">,

page3 with <div id="header" height="100">.

On the first page1 I have the height set to 460px, but when I change it to any other page(for example page2) it should load the page and then animate it from 460px to 100px, after that if I click on page3 I want it to recognize that it is already set to 100px and no animation is necessary, however if I click back to page1 it would load page1 and animate back to height 460px.

Thanks in advance

Before I tried to use this:

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

$('#buttonToPage1').click(function(){
    $('#header').anima开发者_开发百科te({height: '460px'}, 500);
});

But it animates before it loads the page.

P.S. I am not very well with JQuery or JavaScript for that matter.

You could try this:

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

Simply call this as soon as the page loaded complete.

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

Just call them on $(document).ready()

This is a very old question I had. At the time I was not familiar with AJAX. I wanted smooth transitions from one page to another.

At the time I somehow wanted to pass previous page information to next, but what I really needed was pushState API and perhaps a front-end framework like Angular or Vue.

For smaller pages I now use Page.js to manage state and Pug.js templating engine, but you can use something like Mustache, Hogan.js or some other templating engine. This way you can do your transitions with JavaScript without reloading page.