Question

尝试制作文字...加载动画

我可以以500毫秒的间隔添加...然后我想删除它们然后开始动画结束/直到加载完成（基本上它可以永远循环，我会在以后淡出它完成）。

任何帮助都会很棒。

感谢。

_charlie

Answer 1

i = 0;
setInterval(function() {
    i = ++i % 4;
    $("#loading").html("loading"+Array(i+1).join("."));
}, 500);

如果您希望在5次之后更改字符串，则在10次迭代后更改。这可以这样完成。

i = 0;
text = "loading";
setInterval(function() {
    $("#loading").html(text+Array((++i % 4)+1).join("."));
    if (i===10) text = "start";
}, 500);

Answer 2

http://jsfiddle.net/paska/aGfct/12/

var originalText = $("#loading").text(),
    i  = 0;
setInterval(function() {

    $("#loading").append(".");
    i++;

    if(i == 4)
    {
        $("#loading").html(originalText);
        i = 0;
    }

}, 500);

Answer 3

我有一个非常类似于roXon的解决方案，仅在我的情况下我添加了2个功能。

只需添加一个id = loadingDots的空白元素，例如span id =“loadingDots”＆gt;
在document.ready中添加函数调用。现在在我的情况下，我需要在某些页面中显示加载点，但不是全部。因此，该函数将查找id = loadingDots的元素，如果没有找到，将清除间隔。

Demo in JsFiddle

[HTML]

<!--Just have an element with id=loadingDots-->
<span style="font-size:42px">Sending<span id="loadingDots"></span></span>

[JS]

$(document).ready(function(){
    /**Call the function in document.ready somewhere*/
    showLoadingDots();
});

功能

var showLoadingDots = function() {
    /**If element not found, do nothing*/
    if (!$("#loadingDots").length>0) return false;

    var showDots = setInterval(function(){            
        //Thanks to roXon, StackOverflow
        var d = $("#loadingDots");
        d.text().length >= 3 ? d.text('') : d.append('.');
    },300);
}

希望它有所帮助。感谢roXon，感谢他们。

Answer 4

尝试使用setInterval也是如此：

setInterval(function(){
    for (i = 1; i <= 3; i++) {
        setTimeout(function() {
        $("#loading").append(".");
        }, i * 500);
    }
    $("#loading").html('loading');
}, 2000);

Answer 5

只需在循环结束时添加此行：

i = (i === 3) ? 0 : i;

这只是说“如果i等于3，将其设置为零，否则保持原样”的简写。这应该重新启动你的循环，直到你设置一个退出条件。

编辑：等等，我实际上并没有看到你如何追加.（抱歉，目前无法让jsFiddle运行任何东西）！如果您使用上述i重置，则每次迭代时，您确实需要将.个字符的数量设置为i。

编辑2 ：再看一遍，你甚至需要将i带入一个闭包中，以便在setTimeout 声明时获取其值< / strong>，否则当setTimeout 执行时，您将获得任何价值，这是不可预测的。基本上，不要使用这个解决方案 - 使用杰夫！ ;）

jQuery文本加载动画

5 个答案: