The problem is, you are using hide() and show() which does not make use of queue based executions so your .delay() does not have any effect.
Use queue(animation) based methods like hide('fast')
/ show('fast')
/ fadeOut('fast')
/ fadeIn('fast')
instead
$("#box").delay(5000).hide('fast').delay(500).show('fast').delay(500).hide('fast').delay(500).show('fast').delay(500).hide('fast').delay(500).show('fast').delay(500).hide(
function () {
$("#box2").fadeIn("slow");
});
Update:
function flicker(count, callback, current) {
current = current || 0;
$("#box")[current % 2 == 0 ? 'hide' : 'show']();
setTimeout(function(){
if (count * 2 <= current) {
callback();
return;
}
flicker(count, callback, current + 1)
}, 500);
}
setTimeout(function () {
flicker(3, function () {
$("#box2").fadeIn("slow");
})
}, 1000)
Demo: Fiddle