Javascript jQuery 文本加载动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8537358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery text loading animation
提问by stursby
Trying to make a text ... loading animation
正在尝试制作文本...加载动画
here's where I stand: http://jsfiddle.net/aGfct/
这是我的立场：http: //jsfiddle.net/aGfct/
I can get the ... to be added at 500 ms intervals, but then I want to remove them and then start the animation over / until loading is done (basically it can loop forever, and I will fade it out when done).
我可以让 ... 以 500 毫秒的间隔添加，但是我想删除它们，然后重新开始动画 / 直到加载完成（基本上它可以永远循环，完成后我会淡出它）。
Any help would be great.
任何帮助都会很棒。
Thanks.
谢谢。
_charlie
_查理
回答by kba
i = 0;
setInterval(function() {
i = ++i % 4;
$("#loading").html("loading"+Array(i+1).join("."));
}, 500);
If you wish to change the string after 5 says, that's after 10 iterations. This can be accomplished like this.
如果您希望在 5 次后更改字符串，则是在 10 次迭代之后。这可以像这样完成。
i = 0;
text = "loading";
setInterval(function() {
$("#loading").html(text+Array((++i % 4)+1).join("."));
if (i===10) text = "start";
}, 500);
回答by Diego
http://jsfiddle.net/paska/aGfct/12/
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);
回答by Souvik
I have a solution very similar like roXon, only in my case 2 features I have added.
我有一个与 roXon 非常相似的解决方案，仅在我的情况下添加了 2 个功能。
- Just add an blank elemnt with id=loadingDots, like span id="loadingDots">
- Add the function call in document.ready. Now in my case I needed to display the loading dots in some pages but not all. So, the function will look for the element with id=loadingDots, and if not found, will clear the interval.
- 只需添加一个带有 id=loadingDots 的空白元素，例如 span id="loadingDots">
- 在 document.ready 中添加函数调用。现在，在我的情况下，我需要在某些页面而不是全部页面中显示加载点。因此，该函数将查找 id=loadingDots 的元素，如果未找到，将清除该间隔。
[HTML]
[HTML]
<!--Just have an element with id=loadingDots-->
<span style="font-size:42px">Sending<span id="loadingDots"></span></span>
[JS]
[JS]
$(document).ready(function(){
/**Call the function in document.ready somewhere*/
showLoadingDots();
});
The function
功能
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);
}
Hope it helps somebody. Thanks roXon, for ideas.
希望它可以帮助某人。感谢 roXon 的想法。
回答by Jeff Lauder
Try using setInterval also so like:
尝试使用 setInterval 也这样：
setInterval(function(){
for (i = 1; i <= 3; i++) {
setTimeout(function() {
$("#loading").append(".");
}, i * 500);
}
$("#loading").html('loading');
}, 2000);
回答by chrisf
Just add this line at the end of your loop:
只需在循环末尾添加此行：
i = (i === 3) ? 0 : i;
That's just shorthand for saying 'if iis equal to 3, set it back to zero, else leave it as it is'. That should kick off your loop all over again until you set an exit condition.
这只是说“如果i等于 3，将其设置回零，否则保持原样”的简写。这应该重新开始您的循环，直到您设置退出条件。
EDIT: Hold on, I didn't actually look at how you appended the .(sorry, can't get jsFiddle to run anything at the moment)! If you were to use the ireset as above, you'd really need to set the number of .characters equal to iwith every iteration.
编辑：.等等，我实际上并没有看你是如何附加的（抱歉，目前无法让 jsFiddle 运行任何东西）！如果您要使用上述i重置，则您确实需要将每次迭代的.字符数设置为等于i。
EDIT 2: Looking again, you'd even need to take iinto a closure to get its value at the time the setTimeoutis declared, otherwise you'll get whatever value it is when setTimeoutis executed, which is unpredictable. Basically, don't use this solution - use Jeff's! ;)
编辑2：再次寻找，你甚至需要考虑i到一个封闭的时间来获得它的值setTimeout是声明，否则你会得到当它是任何值setTimeout被执行，这是不可预测的。基本上，不要使用这个解决方案 - 使用杰夫的！;)
