Анимация jQuery действительно прерывистая, когда я переопределяю val () текстового поля

Question

Пользователь может нажать кнопку обновления и начать отправку данных в текстовое поле.это приводит к исчезновению кнопки обновления и появлению кнопки отправки.После нажатия кнопки отправки кнопка отправки исчезает, данные отправляются в базу данных с помощью вызова ajax, и кнопка обновления появляется снова.Это затем отключает текстовое поле, пока кнопка обновления не будет нажата снова.Если данные не помещаются в текстовое поле, анимация плавная, но если данные помещаются в текстовое поле, анимация прерывистая.Любая помощь?Спасибо!Я новичок в jQuery и Stack, поэтому любые советы очень ценятся.

$("#kat_one").click(function () {
    $("#knock_and_talk_one").removeAttr('disabled');
    let update_kat_one_button = $("#kat_one");
    update_kat_one_button.hide('fast');
});

$("#submit_button_one").click(function (event) {
    let url = $("#submit_button_one").attr('data-submit-knock-and-talk');
    let site_url = $(location).attr("href");
    $.ajax({
        url: url,
        data: {
            'current_site_url_with_pk': site_url,
            'current_textarea_data': $("#knock_and_talk_one").val(),
            'which_kat': 1
        },
        success(data) {
            $("#kat_one").show('fast');
            $("#knock_and_talk_one").attr('disabled', 'disabled');
            $("#knock_and_talk_one").css('background-color', '#e9ecef');
        }
    });
});

Есть ли способ оптимизировать это, чтобы сделать анимацию плавной?