Question

我试图让“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($);
});

Answer 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)）之后。此外，这是将显示设置为无三次，然后三个功能设置显示为阻止执行。一种更简单的方法（如上面的代码所示）是异步传递状态。

Answer 2

您可以使用jQuery show / hide选项来执行相同的效果，并只链接事件。这是一个例子：

var opt = {
    duration: 500
};

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

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

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

2 个答案: