Use the animation's callback function -
$(document).ready(function() {
$('.bio-button').click(function() {
$('.hidden-bio').animate({
top: '0px',
opacity: '1',
left: '0'
}, 500, 'easeOutCirc', function(){
$('.hidden-bio').css({
display: 'block'
});
});
});
});
$(document).ready(function() {
$('.close').click(function() {
$('.hidden-bio').animate({
top: '300px',
opacity: '0',
}, 500, 'easeOutCirc', function(){
$('.hidden-bio').css({
display: 'none'
});
});
});
});