基本的jQuery动画：省略号（三个点依次出现）

Question

我需要的:

我需要一个动画省略号（...），一个点接着一个点出现。动画需要循环播放。我想通过jQuery来实现这个效果。

动画序列:

第一帧: 等待您的选择

第二帧: 等待您的选择。

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

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

我尝试过的:

我一直在研究闪烁文本插件和脉冲 .effect()。

我的问题:

有人有什么建议可以用最简单可靠的方式实现这个效果吗？我很乐意了解一些技巧或函数。

- Dominor Novus

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/

最后，查看我几年前写的教程。你可能会觉得它很有用。

- StathisG

---

虽然我似乎无法在我的网页上重现动画效果（http://tinyurl.com/8ppm9l7），但感谢您提供如此严谨的答案。我已经将“$”符号更改为“jQuery”。除此之外，我唯一能想到的就是可能与其他jQuery脚本冲突。setInterval函数是否需要限制在元素/事件而不是整个文档中？ - Dominor Novus

我已经编辑了我的问题，以澄清动画需要像您的第二个演示一样循环播放。 - Dominor Novus

如果您复制并粘贴了代码，请在最后一个}之后按一次退格键（或者只复制除最后一个}之外的所有内容，并自己添加）。最后似乎有一个奇怪的无形字符，可能是从jsFiddle复制和粘贴代码时带来的。这应该可以解决您的问题。 - StathisG

哇，我真没想到。我甚至对应用修复程序持怀疑态度，但是现在它却奏效了。再次感谢您如此详尽的回答。我喜欢您链接教程中的打字文本动画效果。 - Dominor Novus

免责声明：请注意，在使用间隔时，它们将一直运行，直到间隔被清除。因此，仅仅隐藏消息并不能停止间隔的运行。您需要自己停止它。一个常见的方法是：var a = setInterval(type, 600); 然后使用 clearInterval(a); 来停止它。 - Richard Chassereau

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/

- Eli

---

感谢提供CSS替代方案，并展示了CSS的强大和美丽。整体效果非常流畅。我唯一担心的是跨浏览器支持。 - Dominor Novus

Answer 3

我已经为此编写了一个简单的 JQuery 插件： https://github.com/karbachinsky/jquery-DotAnimation

//<div class="element">Loading</div>

$(function () {
    // Animation will start at once
    var $el = $('.element');

    $el.dotAnimation({
        speed: 300,
        dotElement: '.',
        numDots: 3
    });
});

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

- Igor Karbachinsky

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<span class="animatedDot"></span>

<script type="text/javascript">
    $(document).ready(function() {
        animatedDot.start();
    });
</script>

- Trent