Javascript jQuery文本加载动画

正在尝试制作文本。。。加载动画

我的立场是：

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

任何帮助都会很好

谢谢

---

_charlie

只需在循环末尾添加这一行：

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

这只是表示“如果

i

等于3，将其设置回零，否则保持原样”的简写。这将再次启动循环，直到设置退出条件

编辑：等等，我实际上没有看到您是如何附加

（对不起，目前无法让JSFIDLE运行任何内容）！如果要使用如上所述的

i

重置，则确实需要在每次迭代中将

字符数设置为等于

i

---

编辑2：再次查看，您甚至需要将

i

放入一个闭包中，以在

setTimeout

声明时获取其值，否则在执行

setTimeout

时将获得任何值，这是不可预测的。基本上，不要使用此解决方案-使用Jeff的！；）

尝试使用setInterval，如下所示：

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

setInterval（函数（）{
对于（i=1；i

如果你想在5次之后更改字符串，那是在10次迭代之后。这可以像这样完成

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

我有一个类似于roXon的解决方案，只是在我的案例2中添加了一些功能

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

[HTML]

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

功能

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的想法。
@Andrew yes它会的，OP提到的这一点不是问题。由于
setTimeout
调用，每个循环执行都会被推到堆栈的末尾，所以它不应该锁定UI，但它值得一看。@ChrisFrancis它会锁定UI。你在做一个无限的q使用
setTimeout
s。JS引擎不会在添加新超时之前等待每个超时的执行。如果希望引擎等待，请使用
setInterval
。是的，将循环移动到
setInterval
中会更好-幸运的是，比我聪明的人已经发布了这一消息！）不需要gif。我只想让点“动画”循环，直到加载。您还可以将整个过程分配给一个变量和clearInterval（myvar）；当您完成时，我认为这种方法非常复杂，请查看我的简单代码：
<!--Just have an element with id=loadingDots-->
<span style="font-size:42px">Sending<span id="loadingDots"></span></span>

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