如何为按钮文本设置动画？（加载类型的动画） - jquery？答案

【问题标题】：How to animate button text? (loading type of animation) - jquery?如何为按钮文本设置动画？（加载类型的动画） - jquery？
【发布时间】：2010-04-30 08:34:42
【问题描述】：

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

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

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

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

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

以前有人做过或知道如何做到这一点吗？我有谷歌，但似乎找不到这种类型的东西。

【问题讨论】：

标签： javascript jquery button text

【解决方案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);
}

【讨论】：

【解决方案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);
});

【讨论】：