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

Question

我正在尝试让 "READY" 这个词闪烁 3 次然后消失，就像它们在老式电子游戏中那样。我正在使用 jQuery 将 css 从 display: block; 更改为 display: none; 但我无法让它工作，而且我对使用 [=25 进行动画处理也是新手=] 我担心这不是最好的方法。有人能告诉我为什么这不起作用 and/or 告诉我最实用的方法吗？（我很确定有比我正在尝试的方法更好的方法让事情眨眼）。

这是 fiddle：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($);
});

Answer 1

您可以使用 jQuerys show/hide 选项来达到同样的效果，并且只是链接事件。这是一个例子：

var opt = {
    duration: 500
};

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

Fiddle: http://jsfiddle.net/skriblez/7dawdrtq/3/

Answer 2

试试这个：

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)) 之后。此外，这是将 display 设置为 none 三次，然后三个函数将 display 设置为块执行。一种更简单的方法（如上面的代码所示）是异步传递您的状态。

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

How to loop this simple jQuery animation 3 times then stop?

jquery

animation

timing