CSS Переход между добавлением классов в Javascript

Question

Я в настоящее время в процессе разработки темы Tumblr, и я нашел этот кусок кода и редактировал его к моим потребностям:

<script>function sticky_relocate() { 
var window_top = $(window).scrollTop(); 
var div_top = $('#stickhere').offset().top; 
if (window_top > div_top) { 
    $('#container').addClass('stick'); 
    $('#portraitavatar').addClass('left'); 
    $('#blogtitle').addClass('leftalign'); 
    $('#blogdescrip').addClass('leftdescrip'); 
} else { 
    $('#container').removeClass('stick'); 
    $('#portraitavatar').removeClass('left'); 
    $('#blogtitle').removeClass('leftalign'); 
    $('#blogdescrip').removeClass('leftdescrip'); 
}} 

$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
});</script> 

Скрипт изменяет элементы в моем заголовок, когда он попадает в верхнюю часть, меняя CSS каждого из них, с которыми у меня не было проблем. Что мне интересно, был ли способ сделать какой-то переход между обычной формой элемента и когда скрипт добавляет классы? Таким образом, заголовок будет идти от нормального вида, а затем переходит к модифицированному, когда скрипт выполняется. Мне также понадобится его, чтобы отменить изменения, если пользователь вернется в начало страницы. Любая помощь очень ценится!

Answer 1

Вы можете использовать CSS переходы, которые будут переход между любыми значениями, которые отличаются в добавленных классов:

-webkit-transition: all 500ms ease-in-out; 
-moz-transition: all 500ms ease-in-out; 
-ms-transition: all 500ms ease-in-out; 
-o-transition: all 500ms ease-in-out; 
transition: all 500ms ease-in-out; 

Вы должны будете иметь аналогичные свойства перехода между хотя. Если исходное состояние имеет номер height:45px;, а новый имеет номер height:36px;, когда триггеры javascript будут проходить между этими значениями более 500 мс.