Как анимировать текст кнопки? (загрузка типа анимации) - JQuery?

Question

У меня есть кое-что, что я хочу сделать и хочу посмотреть, что вы, ребята, думаете и как это можно реализовать.

Я получил форму на странице, и форма будет отправлена ​​сама себе для выполнения некоторого процесса (выполнения функций) в классе.

После нажатия кнопки отправки я хочу анимировать текст кнопки в “SUBMIT .” -> “SUBMIT ..” -> “SUBMIT …” -> “SUBMIT ….” -> “SUBMIT ….” и затем снова. Сортировать «оживить» текст кнопки.

Как только весь процесс будет завершен, текст кнопки снова станет текстом «ОТПРАВИТЬ».

Обратите внимание, что я не ищу решение для кнопки с изображением, а это означает, что я не хочу реализовывать анимированное изображение кнопки GIF.

Кто-нибудь делал это раньше или знает, как это можно сделать? У меня есть Google, но, кажется, ничего подобного не найдено.

Answer 1

Установите таймер с javascript, который будет работать до тех пор, пока процесс не будет завершен, обязательно укажите для него флаг.

И поскольку вы используете jQuery, вы можете просто $("#button-id").val(nextStep);, где nextStepследующая строка анимации.Пример:

function putAnimation () {
    var b = [".", "..", "..." ];
    var i = 0;

    var a = setInterval(function () {
        $("#button-id").val("SUBMIT " + b[i++]);

        if (stopped) {
            $("#button-id").val("SUBMIT");
            clearInterval(a);
        }
    }, 500);
}

Answer 2

Для самой анимации:

$('#submit').click(function() {
  $(this).val("Submit    ").delay(200).val("Submit .").delay(200).val("Submit ..").delay(200).val("Submit ...").delay(200).val("Submit").delay(200);
});