css change after jquery animation

Question

I was trying to make this piece of code to work properly. There is a hidden div (hidden-bio) i want animate on click. Now i want it to close too but the "display: none" part is triggering before the animation so i was wondering how to make this happen after the animation is done.

$(document).ready(function() {
    $('.bio-button').click(function() {         
    $('.hidden-bio').animate({
       top: '0px',
       opacity: '1',
       left: '0'
     }, 500, 'easeOutCirc');
     $('.hidden-bio').css({
         display: 'block'
     });
});                               
});

$(document).ready(function() {
    $('.close').click(function() {          
    $('.hidden-bio').animate({
       top: '300px',
       opacity: '0',
     }, 500, 'easeOutCirc');
     $('.hidden-bio').css({
         display: 'none'
     });
});                               
});

Answer 1

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

});                               
});