基本的jQuery动画：Elipsis（三个点顺序出现）

我需要的：

我需要一个动画的elipisis（…），一个点出现在另一个之后。 动画需要循环。 我想通过jQuery实现这一目标

动画序列：

第1帧：等待您的选择

第2帧：等待您的选择。

第3帧：等待您的选择..

第4帧：等待您的选择……

我尝试过的：

我一直在研究一个插件来闪烁文本和脉动.effect（） 。

我的问题：

有没有人对最简单，最可靠的方法有任何建议？ 我很乐意被指出一种技术或function。

Answer 1

如果你只需要一个接一个地出现点，尝试一下非常简单的东西，如下所示：

Awaiting your selection
​ var dots = 0; $(document).ready(function() { setInterval (type, 600); }); function type() { if(dots < 3) { $('#message').append('.'); dots++; } }​ 

http://jsfiddle.net/fVACg/

如果您希望它们出现多次（要删除然后重新打印），您可以执行以下操作：

 
Awaiting your selection
​ var dots = 0; $(document).ready(function() { setInterval (type, 600); }); function type() { if(dots < 3) { $('#dots').append('.'); dots++; } else { $('#dots').html(''); dots = 0; } }​ 

http://jsfiddle.net/wdVh8/

最后，查看几年前我写过的教程 。 您可能会发现它很有用。

Answer 2

除了StathisG使用jquery的答案之外，您还可以通过CSS3使用动画迭代计数和动画延迟来实现它

 @-webkit-keyframes opacity { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes opacity { 0% { opacity: 1; } 100% { opacity: 0; } } #loading { text-align: center; margin: 100px 0 0 0; } #loading span { -webkit-animation-name: opacity; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -moz-animation-name: opacity; -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; } #loading span:nth-child(1) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; } #loading span:nth-child(2) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; } #loading span:nth-child(3) { -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; }​ 

演示： http ： //jsfiddle.net/VXdhG/1/

Answer 3

我为它写了一个简单的JQuery插件： https ： //github.com/karbachinsky/jquery-DotAnimation

 //
Loading
 $(function () { // Animation will start at once var $el = $('.element'); $el.dotAnimation({ speed: 300, dotElement: '.', numDots: 3 }); }); 

JSFiddle示例： https ：//jsfiddle.net/bcz8v136/

Answer 4

以下代码基本上就是我最终的结果。

JavaScript的：

 var animatedDot; animatedDot = animatedDot || (function () { var dots = 0; var animatedDotInterval; var selectorAnimatedDot = ".animatedDot"; return { start: function(interval) { if (!interval) interval = 400; animatedDotInterval = setInterval(this.nextFrame, interval); }, stop: function() { if (animatedDotInterval) clearInterval(animatedDotInterval); }, nextFrame: function() { if ($(selectorAnimatedDot).length) { if (dots < 3) { $(selectorAnimatedDot).append('.'); dots++; } else { $(selectorAnimatedDot).html(''); dots = 0; } } else { if (animatedDotInterval) clearInterval(animatedDotInterval); } } }; })(); function animatedDotTimeout(timeout) { if (!timeout) timeout = 10000; animatedDot.start(); setTimeout(animatedDot.stop, timeout); } 

HTML：

 Loading