如何循环这个简单的 jQuery 动画 3 次然后停止？答案

【问题标题】：How to loop this simple jQuery animation 3 times then stop?如何循环这个简单的 jQuery 动画 3 次然后停止？
【发布时间】：2015-02-15 23:22:40
【问题描述】：

我正在尝试让“READY”一词闪烁 3 次，然后像在老式电子游戏中那样消失。我正在使用 jQuery 将 css 从 display: block; 更改为 display: none; 但我无法让它工作，而且我也是使用 jQuery 制作动画的新手，我担心这不是最好的方法这。有人可以告诉我为什么这不起作用和/或告诉我最实用的方法吗？（我很确定有比我正在尝试的方法更好的方法让事物闪烁）。

这是小提琴：http://jsfiddle.net/7dawdrtq/1/

这是 jQuery：

function ready_blink($){
    for (i = 0; i <= 3; i++){
        $('#ready').css({'display': 'none'});
        setTimeout(function(){$('#ready').css({'display': 'block'}), 500;});
    }
};

$(document).ready(function () {
    ready_blink($);
});

【问题讨论】：

标签： jquery animation timing

【解决方案1】：

试试这个：

function ready_blink($, show, count){
    if (show) {
        count = count - 1;
        $('#ready').css({'display': 'block'});
    } else {
        $('#ready').css({'display': 'none'});
    }
    if (count > 0 || show) {
        setTimeout(function(){
            ready_blink($, !show, count);
        }, 500);
    }
};

$(document).ready(function () {
    ready_blink($, true, 3);
});

所以这里发生了一些事情。首先，您的超时 (500) 在您传递给 setTimeout 的函数内，它必须在函数 (setTimeout(fn, timeoutInterval)) 之后。另外，这是将显示设置为无 3 次，然后将三个功能设置为显示以阻止执行。一种更简单的方法（如上面的代码）是异步传递您的状态。

【讨论】：

感谢您的解释！我现在明白我做错了什么。这是一个很好的答案！只要堆栈允许我，我就会选择它...说我要给它五分钟 :(

【解决方案2】：

您可以使用 jQuery 的显示/隐藏选项来实现相同的效果，并且只是链接事件。这是一个例子：

var opt = {
    duration: 500
};

$('#ready')
    .show(opt).hide(opt)
    .show(opt).hide(opt)
    .show(opt).hide(opt);

小提琴：http://jsfiddle.net/skriblez/7dawdrtq/3/

【讨论】：