如何動畫按鈕文字？ （加載類型的動畫） - jQuery的？

Question

我得到了一些我想要做的事情，並希望看到你們的想法以及如何實施。

我在頁面中獲得了一個表單，表單將提交給自己在一個類中執行一些過程（運行函數）。

一旦點擊提交按鈕，我想動畫的按鈕文本 「SUBMIT .」 -> 「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); 
});