jquery - 基本 jQuery 动画 : Elipsis (three dots sequentially appearing)

Question

我需要什么:

我需要一个动画省略号(...)，一个点一个接一个地出现。动画需要循环播放。我想通过 jQuery 实现这一点

动画序列:

第 1 帧:等待您的选择

第 2 帧:等待您的选择。

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

第 4 帧:等待您的选择...

我尝试过的:

我一直在研究plugin to blink text和 pulsate .effect() .

我的问题:

有人对实现这一目标的最简单、最可靠的方法有任何建议吗？我很高兴有人指出一项技术或功能。

Answer 1

如果您只需要这些点一个接一个地出现一次，请尝试一些非常简单的操作，如下所示:

<div id="message">Awaiting your selection</div>​

var dots = 0;

$(document).ready(function() {
    setInterval (type, 600);
});

function type() {
    if(dots < 3) {
        $('#message').append('.');
        dots++;
    }
}​

http://jsfiddle.net/fVACg/

如果您希望它们出现多次(删除然后重新打印)，您可以执行如下操作:

<div>Awaiting your selection<span id="dots"></span></div>​

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/

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