Без анимации

Анимация jQuery использует собственный параметр ослабления . К сожалению, только swingи linearдоступны

Единственными облегчающими реализациями в библиотеке jQuery являются значения по умолчанию, называемые swing, и одно, которое прогрессирует с постоянной скоростью, называемой линейной. Доступны более легкие функции с использованием плагинов, в первую очередь, набора пользовательских интерфейсов jQuery.

Документация .

У вас есть два варианта.

Первая - это CSS3 Animations , с помощью которой вы можете время и объединить несколько анимаций. Поэтому я бы предложил вернуться к классам и использовать CSS.

Второй использует jQuery UI , который имеет следующий список вариантов ослабления:

linear
swing
_default
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInSine
easeOutSine
easeInOutSine
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

То, что вы выбираете или предпочитаете, зависит от вас.

Спасибо за помощь, но это оказалось моим решением. Использование непрозрачности и наличие тега содержат «", избегали внезапного перехода от текстовой вставки, делая переход гладким.

if (getPercent === 1) {

    $('.progress').animate({height: "4rem"}, 1000);
    $('.progress_checkout').text('Proceed to checkout!');
    $('.progress_checkout').animate({opacity: 1}, 800);
} else {
    $('.progress').animate({height: "2rem"}, 1000);
    $('.progress_checkout').text(' ');
    $('.progress_checkout').animate({opacity: 0}, 800);
}