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

Question

I'm trying to get the word "READY" to flash 3 times and then disappear like they do in old school video games. I'm using jQuery to change the css from display: block; to display: none; but I can't get it to work and I'm also new to animating with jQuery and I'm concerned this isn't the best way to do this. Can someone tell me why this is not working and/or tell me the most practical way to do this? (I'm pretty sure there is a better way make things blink than the method that I am trying).

Here's the fiddle: http://jsfiddle.net/7dawdrtq/1/

Here's the 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

Try this:

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);
});

So a couple things are going on here. Firstly, your timeout (500) is inside the function you're passing to setTimeout, it needs to be after the function (setTimeout(fn, timeoutInterval)). Also, this is setting display to none three times, and then three functions setting display to block execute. A simpler way (as in the code above) is to asynchronously pass your state through.