Изменение высоты div после загрузки страницы при необходимости с помощью Jquery

Question

Например, у меня есть 3 страницы:
page1 с <div id="header" height="460">,
page2 с <div id="header" height="100">,
page3 с <div id="header" height="100">.

На первой странице1 у меня установлена ​​высота 460px, но когда я изменяю ее на любую другую страницу (например, page2), она должна загрузить страницу, а затем анимировать ее с 460px до 100px, после чего, если я нажму на page3 Я хочу, чтобы он распознал, что он уже установлен на 100 пикселей, и анимация не требуется, однако, если я вернусь к странице 1, она загрузит страницу 1 и оживит обратно до высоты 460 пикселей.

Заранее спасибо

Прежде чем я попытался использовать это:

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

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

Но он оживляет перед загрузкой страницы.

P.S. Я не очень хорошо с JQuery или JavaScript в этом отношении.

Answer 1

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

Просто позвоните им $(document).ready()

Answer 2

Это очень старый вопрос, который у меня был. В то время я не был знаком с AJAX. Я хотел плавных переходов с одной страницы на другую.

В то время я как-то хотел передать информацию о предыдущей странице следующей, но мне действительно был нужен pushState API и, возможно, интерфейсная среда, такая как Angular или Vue.

Для небольших страниц я теперь использую Page.js для управления состоянием и Pug.js шаблонизатора, но вы можете использовать что-то вроде Mustache, Hogan.js или некоторого другого шаблонизатора , Таким образом, вы можете выполнять переходы с помощью JavaScript без перезагрузки страницы.

Answer 3

Вы можете попробовать это:

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

Просто позвоните, как только загрузится полная страница.