如何动画按钮文字？ （加载动画类型） - jquery？

Question

我有一些我想做的事情，想看看你们的想法以及如何实施。

我在页面中有一个表单，表单将提交给自己在类中执行某些进程（运行函数）。

单击提交按钮后，我想将按钮文本设置为动画 “SUBMIT .” -> “SUBMIT ..” -> “SUBMIT …” -> “SUBMIT ….” -> “SUBMIT ….”然后再回来。 对按钮文本进行“动画处理”。

整个过程完成后，按钮文本将再次返回“提交”文本。

请注意，我不是在寻找图像按钮解决方案，这意味着我不想实现gif动画按钮图像。

之前有人这样做过或知道如何做到这一点？我有谷歌，但似乎没有找到这种类型。

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);
});