<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
</head>
Добавьте обратный вызов, чтобы показать:
$("#progressbar_area").show(speed, function() {});
Функция обратного вызова будет вызываться после завершения анимации.
IMO, было бы лучше поместить оставшуюся часть вашей функции в параметр обратного вызова в show
:
$("#progressbar_area").show("fast", function() {...} );
Предостережение в том, что обратный вызов запускается (отдельно ) для каждого элемента в селекторе. Однако нормально, если вы показываете только один элемент.