jquery 애니메이션 후 CSS 변경

Question

제대로 작동하려면이 코드를 만들려고했습니다. 숨겨진 div (hidden-bio)가 있는데 클릭하면 애니메이션이됩니다. 이제 너무 닫고 싶지만 "display : none"부분이 애니메이션 전에 트리거되므로 애니메이션을 마친 후에 어떻게해야하는지 궁금합니다.

$(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

를 사용하여 애니메이션의 콜백 함수 -

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

});        
});