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

Posted 2023-05-08

【中文标题】基本 jQuery 动画：省略号（三个点依次出现）

【英文标题】：Basic jQuery animation: Elipsis (three dots sequentially appearing)

【发布时间】：2012-10-11 09:29:21

【问题描述】：

我需要什么：

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

动画序列：

第 1 帧：等待您的选择

第 2 帧：等待您的选择。

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

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

我尝试过的：

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

我的问题：

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

【参考方案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。您可能会发现它很有用。

【讨论】：

感谢您提供如此严谨的回答，尽管我似乎无法在我的网页中重现动画：tinyurl.com/8ppm9l7。我已将“$”符号更改为“jQuery”。除此之外，我唯一能想到的是与其他 jQuery 脚本的潜在冲突。是否需要将 setInterval 函数限制为一个元素/事件而不是我的整个文档？

我已经编辑了我的问题，以澄清动画需要按照您的第二个演示循环播放。

如果您复制并粘贴了代码，请紧跟最后一个 并按一次退格键（或者只复制除最后一个 之外的所有内容并自己添加）。最后似乎有一个奇怪的无敌角色，可能是从jsFiddle复制粘贴代码后携带的。这应该可以解决您的问题。

哇，我没想到。我什至对应用修复持怀疑态度/怀疑，但你瞧，它现在可以工作了。再次感谢您提供如此彻底的答案。我喜欢您链接到的教程中的打字文本动画效果。

免责声明：请记住，在使用间隔时，它们将运行直到间隔被清除。因此，简单地隐藏消息不会停止间隔运行。你需要自己阻止它。执行此操作的常用方法是： var a = setInterval(type, 600);然后使用 clearInterval(a);阻止它。

【参考方案2】：

除了 StathisG 使用 jquery 的答案之外，您还可以通过 CSS3 使用 animation iteration count 和 animation-delay 来实现它

@-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/

【讨论】：

感谢您提供 CSS 替代方案并展示 CSS 的强大功能和美感。整体效果非常圆润。我对这种方法唯一关心的是跨浏览器支持。

谢谢，它也帮助了我:)

【参考方案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/

【参考方案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>